Multiple dynamic routes on same level impossible with Nuxt?

[kodekoder]

I am trying to have such thing:

pages/
--| _section/
-----| index.vue
--| _slug/
-----| index.vue
--| index.vue

But looks like it doesn't work with Nuxt.

Is there any way to accomplish this?

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

[manniL]

You can do this definitely with a little workaround. Only use one dynamic route, e.g.:

pages/
--| _value/
-----| index.vue
--| index.vue

Then, use the /_value/index.vue for logic to differ between a section and a slug and render subsequent components based on this decision. ☺️

[kodekoder]

Trying to figure out practical example, but have no ideas.

Right now I am receiving sections this way

axios.get(`articles/${params.section}`)

And slugs this way

axios.get(`articles/${params.section}/${params.slug}`)

Any ideas how should I refactor this? Maybe I can provide some Component related ID in my JSON? Fod example:

{
  "type": "sectionORslug",
  "data": ...
} 

I guess it could work?

[manniL]

Well, in your case you could nest your dynamic routes because slug would need both: section and slug. See how this (easily) works here

[kodekoder]

Don't get it, how to apply to Nuxt routing?

[manniL]

Sorry, mislinked! You can see the theory in docs :)

In the end, a structure like this may help you:

pages/
--| _section/
-----| _slug/
--------| _slug.vue //For slugs
--------| index.vue //For sections
--| index.vue

[kodekoder]

@manniL but then I will have route like this, no? /section/slug
If so, then this is not what I ask. I need /section and /slug on same level.

[kodekoder]

I already have similar like this

This is basically the same, right?

[manniL]

@jerakode Yeah, exactly. But how do you get the section parameter if you are in the _slug route?

Yup, the provided structure is similar to what I suggested ☺️

[kodekoder]

Not sure what you ask. How do I get section in my current code? Given the route structure /section/slug I take it from params.section.

[manniL]

In your current code, this makes sense. But you want it on the same level. If so, how would you find out the section then when you are in the slug route?

[kodekoder]

I have all this data in JSON, I guess. All slugs (articles) are belongs to appropriate sections. Not sure how it can be solved right.

OK, what about next. We can have dynamic routes along with static on same level, right? I mean we can have dynamic section and static, lets say, special route (without underscore). So Nuxt can distinguish between this two. What if we have a fixed array of Sections? Can they behave then like static routes? I am anyway recieve a list of Sections on nuxtServerInit.

[manniL]

Well, then it might be useful to go for a /_section/_slug/ routing to map your data.

Exactly, you can use dynamic and static routes on the same level.
I'm not sure if it's possible to use a fixed route array as static routes programmatically. 🤷‍♂️

[supadrupa]

I have the same problem. How to fix it? I need multiple dynamic routes on same level. Could you help me please?

[merijnponzo]

similar problem

pages/_slug.vue
pages/index.vue
pages/recipes/_slug.vue
pages/recipes/index.vue

• I generate a nav with router-links (this is a component in a layout)
• they are rendered like /about, /team etc

Now I go to the recipes overview, with router-links like recipes/spaghetti
When I click on this item it matches
pages/recipes/_slug.vue

But my nav is suddenly replaced from /about, /team
to recipes/about, recipes/team

turned out I didnt add '/' before the segments in the main nav router-links
Now it works

[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.