VueJS Routing Multiple Dynamic Parameters in url

Question

I'm trying to implement routing over an spa which was only swapping out components based on setting true/false properties on the main VUE instance. I'm using the official Vue router for VUE.JS 2

There is a component, which i routed to the following path:

  {
    path: '/Foe/Bar/Details/:id',
    components: {
        layerTop: 'barDetail',
        layerMiddle: notImportant
    },
    props: { layerTop: true }
},

So when the user clicks on the details button my components load as expected. My problem is when I try to navigate from this route to a new one but I want to keep my named 'layerTop' router-view as currently is. Basically I dont want to change the 'layerTop' view, just the layerMiddle view. So I was thinking my path would look something like this:

path: 'Foe/Bar/Details/:barId/Categories/:categoryId

But I don't know how to map the :barId param to the Bar component's prop, and the categoryId to the Category comp's prop.

When it is a single parameter it works just like in the example above. I'm pretty new to Vue and the router especially, tried to find an example on the docs but couldnt. Thank you for any input.

sfyrious · Accepted Answer · 2018-04-02 14:15:26Z

1

Check out the nested routes documentation.

https://router.vuejs.org/en/essentials/nested-routes.html

routes: [
    {path: "/foo/bar". component: FooBar,
        children [
            path: "/:id", component: FooBarDetails,
                 children: [ 
                     {path: "categories/:categoryid", component: Category}
                 ]
        ]
    }
 ]

answered Apr 2, 2018 at 14:15

sfyrious

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Screll Over a year ago

Asker: You would essentially have a '<router-view>' for your FooBar (Component), and inside FooBar (Component), a '<router-view>' for FooBarDetails (Component), and inside FooBarDetails (Component), a '<router-view>' for Category (Component).

Collectives™ on Stack Overflow

VueJS Routing Multiple Dynamic Parameters in url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related