前端项目练习——引入vue-router4

一、官方文档

安装 | Vue Router (vuejs.org)

二、安装

打开项目终端，输入安装命令

npm install vue-router@4

三、引入

（1）可以在官方文档中查看入门教程

（2）这里我在工程项目中的src文件夹下创建一个router文件夹，在文件夹下创建一个index.js文件

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

const routes = [] 
const router = createRouter({
    history:createWebHashHistory(),
    routes,
})

export default router

（3）在main.js入口文件中引入

import router from './router'

app.use(router)



//完整代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'virtual:windi.css'
import 'virtual:windi-devtools'

import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')