Passing props to Vue.js components instantiated by Vue-router

vue.js vue-router

Robert · Jun 21, 2016 · Viewed 64.8k times · Source

Suppose I have a Vue.js component like this:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

And I want to use it when some route in vue-router is matched like this:

router.map({
    '/bar': {
        component: Bar
    }
});

Normally in order to pass 'myProps' to the component I would do something like this:

Vue.component('my-bar', Bar);

and in the html:

<my-bar my-props="hello!"></my-bar>

In this case, the router is drawing automatically the component in the router-view element when the route is matched.

My question is, in this case, how can I pass the the props to the component?

Answer

<router-view :some-value-to-pass="localValue"></router-view>

and in your components just add prop:

props: {
      someValueToPass: String
    },

vue-router will match prop in component