Vue.js 2 Design Patterns and Best Practices

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: