How to route between pages in a Vue.js application using Vue Router?

To route between pages in a Vue.js application using Vue Router, you can follow these steps:

Install Vue Router by running the following command in your terminal:

npm install vue-router

Create a new file called router.js. In this file, import Vue and Vue Router, and use Vue.use to install Vue Router.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Define your routes in the router.js file. Each route will have a path and a component associated with it.

import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Create a new instance of VueRouter and pass in the routes array.

const router = new VueRouter({
  routes
})

In your main App.vue component, import the router.js file and use the router instance.

import router from './router.js'

export default {
  router
}

In your template, use the <router-link> component to create links to different pages.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Finally, include a <router-view> component in your template where the content of each page will be rendered.

<router-view></router-view>

You can now navigate between pages in your Vue.js application by clicking on the links created with <router-link>. The content of each page will be rendered in the <router-view> component.