Adding navigation using vue-router

I hope you still remember from the second chapter what vue-router is, what it does, and how it works. Just to remind you:

Vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.

-(From the official documentation of vue-router)

The vue-router is very easy to use, and we don't need to install anything – it already comes with the default scaffolding of Vue applications with a webpack template. In a nutshell, if we have Vue components that should represent the routes, this is what we have to do:

• Tell Vue to use vue-router

• Create a router instance and map each component to its path

• Pass this instance to the options of a Vue instance or component

• Render it using the router-view component

Note

Check the official vue-router documentation: https://router.vuejs.org

When you create your router, you should pass the array...