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

Add an object for each of the routes containing the path and component keys. The thing

to note about the path is that it shouldn't start with a / if you want the path to be added to

the end of the parent.

For example, if you wanted the URL to be /about/contact to render the AboutContact

component, you would make the route component like the following:

const router = new VueRouter({

routes: [

{

path: '/',

component: Home

},

{

path: '/about',

component: About,

children: [

{

path: 'contact',

component: AboutContact

},

{

path: 'food',

component: AboutFood

}

]

}

],

linkActiveClass: 'active',

linkExactActiveClass: 'current'

});

However, if you wanted the URL to be simply /contact, but still render the

AboutContact component inside the About component, you could add the preceding

slash. Try viewing the app without the slash, and then with it added, to see the difference it
makes. If you wanted a sub-route to show when the parent is loaded without a second part

of the URL, you would use an empty path—path: ''.

For now, leave it without the slash and add the preceding children array. Head to your

browser and navigate to the About page. Add /contact or /food to the end of the URL,

and notice the new content appear in place of the element you added to

the template earlier.