Vue.js 2 Cookbook

How to do it...

In this recipe, you will build an online accounting website for an imaginary world. We will have two users--Stark and Lannister--and we will be able to see how much gold and how many soldier these two have.

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: [  ...