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 objectthis.$route: The current route object points to the element in context
If you are using...