Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Router Patterns Chapter 20

Route props

Let's change our /hello/name route to pass the name parameter as a component prop,

which can be done by adding the props: true flag to the route:

const routes = [

{ path: '/hello', component: Hello },

{ path: '/hello/:name', component: HelloName, props: true},

]

We can then update our component to take in a prop with an id of name and also log this

to the console within the life cycle hook:

const HelloName = {

props: ['name'],

template: `<h1>Hello {{ name }}</h1>`,

created() {

console.log(`Hello ${this.name}`)

}

}

If we then try and navigate to different dynamic routes, we'll see that the created hook only

fires once (unless we refresh the page) even though our page shows the correct name: