Vue Router Patterns Chapter 20
If we then navigate to /#/hello/ or /#/world, the appropriate component is displayed:
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:
// Components
const Hello = { template: `<h1>Hello</h1>` };
const HelloName = { template: `<h1>Hello {{ $route.params.name}}` }
// Routes
const 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 hooks aren't fired again if the parameter changes
(that is, from /hello/paul to /hello/katie). We'll look at this soon!