Vue.js 2 Design Patterns and Best Practices

Dynamic routes

We can also dynamically match routes depending on a particular parameter. This is done by specifying a route with a colon before the parameter name. Here's an example using a similar greeting component:

// Componentsconst Hello = { template: `<h1>Hello</h1>` };const HelloName = { template: `<h1>Hello {{ $route.params.name}}` }// Routesconst routes = [ { path: '/hello', component: Hello }, { path: '/hello/:name', component: HelloName },]

If our user navigates to /hello, they'll see h1 with the text Hello. Otherwise, if they navigate to /hello/{name} (that is, Paul), they'll see h1 with the text Hello Paul.

We've made a lot of progress, but it's important to know that when we navigate to parameterized URLs, component lifecycle ...