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

Now, you can finally create the router. The code for it is as follows:

const router = new VueRouter({})

This router doesn't do much; we have to add routes (which correspond to URLs) and their
associated components:

const router = new VueRouter({

routes: [

{ path: '/', component: Home },

{ path: '/menu', component: Menu },

{ path: '/bar', component: Bar }

]

})

Now our application is almost complete; we only need to declare a simple Vue instance:

new Vue({

router,

el: '#app'

})

Our application will now work; before launching it, add this CSS rule to have slightly better
feedback:

a.router-link-active, li.router-link-active>a {

background-color: gainsboro;

}

When you open your app and click on the Bar link, you should see something similar to the

following screenshot: