1.cnpm i vue-router@next -D

2.router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from '../views/Home.vue'

import Test from '../views/Test.vue'

import About from '../views/About.vue'

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home

  },

  {

    path: '/about',

    name: 'About',

    component: About

  },

  {

    path: '/test',

    name: 'Test',

    component: Test

  }

]

const router = createRouter({

  history: createWebHashHistory(),

  routes

})

export default router

3.在main.js引入router，挂载router

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

4.在app.vue中放入路由

<div id="nav">

      <router-link to="/">Home</router-link> |

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

      <router-link to="/test">Test</router-link>

  </div>

  <router-view/>