How to pass props to Vue.js components instantiated by Vue-router?

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?

Write your answer...

Never miss a post from Aditya Agrawal, when you sign up for Ednsquare.