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