Passing props to Vue.js components instantiated by Vue-router
<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
sadly non of the prev solutions actually answers the question so here is a one from quora
basically the part that docs doesn't explain well is
When props is set to true, the
route.params
will be set as the component props.
so what you actually need when sending the prop through the route is to assign it to the params
key ex
this.$router.push({ name: 'Home', params: { theme: 'dark' }})
so the full example would be
// componentconst User = { props: ['test'], template: '<div>User {{ test }}</div>'}// routernew VueRouter({ routes: [ { path: '/user', component: User, name: 'user', props: true } ]})// usagethis.$router.push({ name: 'user', params: { test: 'hello there' // or anything you want }})
In the router,
const router = new VueRouter({ routes: [ { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } } ]})
And inside the <Bar />
component,
var Bar = Vue.extend({ props: ['authorName'], template: '<p>Hey, {{ authorName }}</p>'});