安装
npm install vue-router@4
2、在src下面创建目录router并在router下创建index.js
import { createRouter, createWebHashHistory } from 'vue-router'
//路由参数
const routes = [
{
name: 'login',
path: '/login',
meta: { title:'登陆' },
component:() => import('./../views/Login.vue')
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
3、在main.js下面ure引入
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中使用
<template>
<router-view />
</template>
注意:
1、路由中的页面路径如果没有文件的话会报错哦
2、当然也可以分成多个路由文件,最后合并数组就行