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

The HTML layout of our website is as follows:

<div id="app">

<h1>Kindoms Encyclopedia</h1>

<router-link to="/user/Stark/">Stark</router-link>

<router-link to="/user/Lannister/">Lannister</router-link>

<router-view></router-view>

</div>

We have a title and two links--one for Stark and one for Lannister--and, finally, the

router-view element.

We add the VueRouter to the plugins:

Vue.use(VueRouter)

Then, we register the routes:

const router = new VueRouter({

routes: [

{ path: '/user/:id', component: User,

children: [

{

path: 'soldiers',

component: Soldiers

},

{

path: 'gold',

component: Gold

}

]

}

]

})

What we've said is to register a dynamic route, /user/:id, and inside the

User component, there will be another router-view that will have the nested paths for gold

and soldiers.

The three components just mentioned are written as shown; add them before the routing

code:

const User = { template: `

<div class="user">

<h1>Kindoms Encyclopedia</h1>

User {{$route.params.id}}

<router-link to="gold">Gold</router-link>