Vue router advanced props

Question

I'm trying to customize the props object passed by the router to a component.

In my routes I have:

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: true
},

This allows me to access the dynamic prop inside de component. However, I would like to do something like this:

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        custom: 'something_custom_for_this_route',
        dynamic: dynamic // the dynamic parameter from the route (:dynamic)
    }
},

Where I would be able to access trow props inside the component: custom and dynamic. The custom prop being defined in my route, and the dynamic prop being the value grabbed form the route :dynamic.

Is this possible? Any help is appreciated.

With the example above, I get an error since dynamic isn't define inside the props object.

I have also tried:

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        custom: 'something_custom_for_this_route',
    }
},

and

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: {
        default: true,
        custom: 'something_custom_for_this_route',
    }
},

With these I get dynamic as undefined inside the component.

stdob-- stdob-- · Accepted Answer · 2018-04-12T22:41:50

As written in the documentation:

You can create a function that returns props.

And thus combine the parameters of both types:

{
    path: '/base/fixed/:dynamic',
    component: OfficeActions,
    props: function(route) {
      return Object.assign({}, route.params, {
        custom: 'something_custom_for_this_route'
      })
    }
}

[ https://jsfiddle.net/uypveLhw/ ]

Vue router advanced props

1 Answers