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

Single Page Applications Chapter 15

After that, register the routes:

const router = new VueRouter({

routes: [

{ path: '/',

components: {

default: Parts,

list: List

}

},

{ path: '/computer',

components: {

default: ComputerDetail,

list: List

}

}

]

})

Components is not a single object anymore; it's become an object with two components
inside it: one for the list and the other for the default router-view.

Write the list component, as illustrated, before the router code:

const List = { template: `

<div>

<h2>Shopping List</h2>

<ul>

<li>Computer</li>

</ul>

</div>

` }

This will display just the computer as an item we ought to remember to buy.

The parts component is the following; write it before the router code:

const Parts = { template: `

<div>

<h2>Computer Parts</h2>

<ul>

<li><router-link to="/computer">Computer</router-link></li>

<li>CD-ROM</li>

</ul>

</div>

` }