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

Introducing Vue-Router and Loading URL-Based Components Chapter 8

Would mean you would need to go to /sarah/user/happy to see the user component.

You would, however, have access to a new parameter titled emotion, which means you

could use the following template to render sarah is happy!:

const User = {

template: `<h1>{{ name }} is {{ $route.params.emotion }}</h1>`,

computed: {

name() {

let name = this.$route.params.name;

return name.charAt(0).toUpperCase() + name.slice(1);

}

}

};

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{

path: '/about',

component: About

},

{

path: '/:name/user/:emotion',

component: User

}

],

linkActiveClass: 'active',

linkExactActiveClass: 'current'

});

Dynamic routes will come in handy when we come to build our shop over the next few

chapters, as we'll be using it for both products and categories.