Setting up Vue Router

When we add Vue Router to our project, Vite creates and adds a router folder to the /src directory with a single auto-generated index.js file. This file contains the necessary configurations for our router system, which we will explore in the next section.

In the src/main.js file, we import the defined configuration object and uses the Vue instance method use() to install the router system into the application, as seen in the following code:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)

app.use is an instance method with a built-in mechanism to prevent you from installing a plugin more than once.

After executing app.use(router), the following objects are available for access in any component:

• this.$router: The global router object
• this.$route: The current route object points to the element in context

If you are using...