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

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!