04 整合Vue-Router

Vue Router官方文档：https://router.vuejs.org/zh/guide/

安装Vue Router：

yarn add vue-router@4

创建src/router/index.js，定义路由列表和路由器，并导出路由器：

import {

createRouter,

createWebHashHistory

} from "vue-router"

// 路由列表

const routes = []

// 路由器

const router = createRouter({

history: createWebHashHistory(),

routes,

})

// 导出

export default router;

修改src/main.js，引入router路由器并使用：

import { createApp } from 'vue'

// 引入 element plus

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

// 引入 windi css

import 'virtual:windi.css'

// 引入路由

import router from "./router"

import App from './App.vue'

const app = createApp(App)

// 使用 element plus

app.use(ElementPlus)

// 使用 router

app.use(router)

app.mount('#app')

此时刷新浏览器，http://localhost:5173/#/，后面会自动加一个#号，表示Vue Router生效了。