Dynamic routes generation for multiple component in NUXT

[narenderv7]

Hi all,

I have routes like the following,

/:make/:model  // --> showing model content. (@here routes are dynamic)

/:section/:slug  // --> showing some other section article here. (@here routes are dynamic)

How to define the folder structure for these routes and generate the routes? help need please

_{This question is available on Nuxt.js community (#c1979)}

[clarkdo]

You cannot define multiple exactly same dynamic routes, because router cannot differ them with url, such like /page1 belongs to :section or :make ? So it will always match the first matched route.

You may wrap with different folder with them, such like /m/:make/:model and /:section/:slug :

pages/
--| s/
----| _section/
------| _slug/
--------| index.vue
--| m/
----| _make/
------| _model/
--------| index.vue

Or use the same dynamic route and differ them from the route params:

pages/
--| components/
----| models/
----| articles/
--| _dir/
----| _comp/
------| index.vue

<template>
  <div class="post">
    <component :is="component"/>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.component = () => import(`@/components/${this.$route.params.dir}/${this.$route.params.comp}`)
  }
}
</script>

[narenderv7]

Thanks for replay @clarkdo But i want to do the exact same as given example, i know that we can define middle folders. Here we converting angular to Vue, i don't have choice to change the routes.

[clarkdo]

In my second example，you dont need to change route.

[clarkdo]

BTW，can you show some urls about the two routes, because I'm curious how do you determine the route such like: /blog/post1 belongs to /:make/:model or /:section/:slug in angular ？

[narenderv7]

Yea, sure.

For example,

First Route: /:make/:model.

Here Folder structure is like for the above route, we defined like the following.

pages/
--| _make/
----|_model/
------| index.vue //( For Model page)
----| index.vue //(For Make page)

Ex. Routes :

http://localhost:4200/honda -- will show Make Component.
http://localhost:4200/honda/civic -- will show Model Component.

But For the below routes, we need help.

Second Route : /:section/:slug

Based on section and slug, we defined components.

pages/
--| _section/  //(Will be coming as dynamic)  --> @here we want help for to define folders.
----|_slug/  //(Will be coming as dynamic) 
------| index.vue //( For Artilce page)

Ex routes:
http://localhost:4200/reviews/bmw-review -- will show BMW Article Component.
http://localhost:4200/photos/bmw-photos -- will show BMW Photos Component.
http://localhost:4200/news/bmw-news -- will show BMW Article Component.

[Atinux]

Hi @narenderv7

For this kind of dynamic routes, pages/ system may be not enough, that's why I created @nuxtjs/router module so you can define your own router directly.

[tlgreg]

TL;DR Use extendRoutes.

The question clarkdo raised was how the system should know which is which.
If a request comes in for /foo/bar, how should the system know if foo is a make or a section?

This is usually done by advanced route matching specified with a regex. So you need to tell the router somehow what's the difference between the two routes. For you it most likely would be to tell the router what sections there are and match those before the other route. I'm sure you see that simply by a folder structure, this can't be solved without actually changing the url pattern (as clarkdo suggested).

Internally nuxt uses vue-router, where this is possible with advanced matching patterns. You can create your own routes outside of the ones created automatically from the pages folder structure with extendRoutes config option.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.