how to create dynamic and interchangeable nested routes in nuxt?

Viewed 862

According to documentation, for dynamic routing we should nest folder with folder name _paramname, then nuxt automatically generate route for this dynamic subfolder. I can't understand, how to arrange folder structure, if routes should be dynamic AND interchangeable. For example: I have five or more types of filters, each type contains five to twenty possible variants. Ideally, when user choose some filter, I would like to generate routes like:

/mainfolder/filtertype(n)option/filtertype(n)option/

where dynamic 'filtertype(n)option' segments are interchangeable.

If I create folder structure like this:

-mainfolder
--_filtertype1
  --_filtertype2   

etc, nuxt creates routes in hard order, where no ways to change filtertype segments by each other. I suppose that I should create some structure, where there are any possible combination of nested routes. But it seams not scalable, messy and unclear. Like this:

-mainfolder
--_filtertype1
  --_filtertype2
    --_fiiltertype3
  --_filtertype3
    --_filtertype2
    
--filtertype2
  --_filtertype1
    --_filtertype3
  --_filtertype3
    --_filtertype1

etc. Are there any standard resolves of this task?

1 Answers

I'm not sure that I understood the whole question but I know that Nuxt 3 (with Vue3) will come with Vue Router 4 and will allow for interpolated names in the pages directory.

So, rather than having pages/_slug.vue, it will be pages/[slug].vue, and therefore you could interpolate it to your wishes. Source: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020#/5/6/6

Unfortunately, Nuxt3 will probably come in Q2 2021, so there is still some time to go.

Until then, I'm afraid that you need to do it manually, the old fashioned way.

Related