Setting Up Vue Router for Vue to Use

When we add Vue Router to our project, Vue CLI creates and adds a router folder to the code directory, containing a single auto-generated index.js file. This file contains the necessary configurations for our router.

We will navigate to the file and go through the basic predefined configuration for Vue Router.

First, you will notice that we need to import both Vue and VueRouter from the vue and vue-router packages, respectively. Then we call Vue.use (VueRouter) to install it as a plugin for use within our application:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use is a global method, as discussed in Chapter 5, Global Component Composition. It triggers the internal install method of VueRouter together with the Vue constructor as soon as Vue is available as a global variable of the application. This method has a built-in mechanism to prevent installing a plugin more than once...