Multiple dynamic routes on same level impossible with Nuxt?

jerakode
8
jerakode
commented 2 years ago

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?

0
manniL
5.8k
manniL
commented 2 years ago

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. ☺️

1
jerakode
8
jerakode
commented 2 years ago

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?

0
manniL
5.8k
manniL
commented 2 years ago

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

0
jerakode
8
jerakode
commented 2 years ago

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

0
manniL
5.8k
manniL
commented 2 years ago

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
0
jerakode
8
jerakode
commented 2 years ago

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

0
jerakode
8
jerakode
commented 2 years ago

I already have similar like this

screenshot from 2018-03-10 14-47-46

This is basically the same, right?

0
manniL
5.8k
manniL
commented 2 years ago

@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 ☺️

0
jerakode
8
jerakode
commented 2 years ago

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.

0
manniL
5.8k
manniL
commented 2 years ago

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?

0
jerakode
8
jerakode
commented 2 years ago

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.

0
manniL
5.8k
manniL
commented 2 years ago

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. 🤷‍♂️

0
supadrupa
0
supadrupa
commented a year ago

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

0
merijnvanessen
0
merijnvanessen
commented a year ago

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

0
Informations
QuestionUnresolved
#c2584 - Created 2 years ago