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

Question

Suppose I have a Vue.js component like this:

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


        

Answer 1

In the router,

const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

And inside the component,

var Bar = Vue.extend({
    props: ['authorName'],
    template: '
Hey, {{ authorName }}
'
});