How to pass 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!

' }); 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: 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?

Chris Gregori · Accepted Answer

and in your components just add prop: props: { someValueToPass: String }, vue-router will match prop in component

Prasad Patil · Answer

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 }}

' });

Vue JS

Similar Questions

Arrow function in vue computed does not working

Vue 2 - Mutating props gives warning

VueJS: why is this undefined?

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram