CODEWITHSUNDEEP
vue.jsnuxt.js
Prateek baheti
Prateek baheti

Reputation: 23

Load a different page in nuxt at runtime based on the parameters in the route

We have a scenario in which a different page is required to be loaded based on whether parts of the route has parameters that are valid and that can be determined at run-time.

Consider the following example: Request to http://example.com/param1/param2

If param1 is a valid product identifier (can be determined by an API call to another service) the product page loads or its considered a category and Category Page is loaded.

Considering Nuxt uses static routes mostly and the list of products are dynamic, is there a hook where you can execute custom code to load a different page ?

Upvotes: 1

Views: 1589

Answers (1)

Loki
Loki

Reputation: 1205

Cant you create _product page like described in nuxt docs:

https://nuxtjs.org/guide/routing/#dynamic-routes

And in your code make something like:

<template>
    <div>
        <nuxt-child />
    </div>
</template>

<script>
export default {
    asyncData({route, params, redirect}) {
         //use route
        console.log(route.params.slug)
        //directly use params
        console.log(params.slug)
        redirect(`/`);
    },
};
</script>

or use mounted() hook if you are creating SPA

Upvotes: 1

Related Questions