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 sfyrious · Accepted Answer · 2018-04-02T14:15:26

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}
                 ]
        ]
    }
 ]

VueJS Routing Multiple Dynamic Parameters in url

1 Answers