vite+router

1、首先在控制台输入命令，这里装的是router4，其他版本及安装方法直接看官方文档即可

npm install vue-router@4

2、对router文件夹的index.js进行内容编辑，详解可以参考这个网页

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

const routerHistory = createWebHistory()

const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
component: () => import('../views/page1.vue')
},
{
path: '/page2',
component: () => import('../views/page2.vue')
}
]
})
export default router

3、然后前往main.js调用，把文件修改如下

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

4、这时router已经安装完了，我们去页面里编辑一下 看能否使用

前往app.vue修改文件

<template>
<img alt="Vue logo" src="./assets/logo.png" />
<router-link to='/'> page1</router-link>
<router-link to='/page2'>page2 </router-link>
<router-view></router-view>
</template>