目的:便于后续的维护和修改
思路:将路由拆分为多个文件,例如将导航守卫,路由列表,路由模式啊等等将这些不同的功能存放在不同的文件里,最后设置一个主的入口文件将这些拆分好的文件导入进去
实现步骤:
1-新建router/index.js文件
// 路由主入口
export * from './route'
export * from './router'
修改mian.js
将mian.js中的传统引入方式注释掉然后引入拆分的路由
// 引入拆分的路由
import { AppRouter } from '@/router/index'
createApp(App).use(AppRouter).use(createPinia()).mount('#app')
2-文件的拆分
在router目录下新建 router.js route.js guards.js 文件
router.js ===>
import { createRouter, createWebHistory } from 'vue-router'
// 路由列表
import { AppRoutes } from '@/router/route'
export const AppRouter = createRouter({
history: createWebHistory(),
routes: AppRoutes,
});
//导航守卫
import { beforeEach, afterEach } from '@/router/guards'
AppRouter.beforeEach(beforeEach);
AppRouter.afterEach(afterEach);
route.js ===>
export const AppRoutes = [
{
path: '/login',
name: 'login',
component: () => import('@/views/Login.vue')
},
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue')
}
]
guards.js ===>
import { useGlobalUserStore } from '@/store/UserGlobalStore'
// 前置守卫
export async function beforeEach(to) {
if (to.path == '/login') {
document.title = '后台管理系统'
return
}
if (!localStorage.getItem('token')) {
return '/login'
}
// 以防伪造token增加用户权限信息的判断
try {
await useGlobalUserStore().initUserInfo()
let { permissions } = useGlobalUserStore()
if (permissions[0] === '*:*:*') {
return
}
} catch (e) {
return '/login'
}
}
// 后置守卫
export async function afterEach() {
}
拆分前(参考)
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useGlobalUserStore } from '@/store/UserGlobalStore'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
const Router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/',
name: 'home',
component: Home
}
]
});
Router.beforeEach(async (to) => {
console.log(to);
if (to.path == '/login') {
document.title = '后台管理系统'
return
}
if (!localStorage.getItem('token')) {
return '/login'
}
// 以防伪造token增加用户权限信息的判断
try {
await useGlobalUserStore().initUserInfo()
let { permissions } = useGlobalUserStore()
if (permissions[0] === '*:*:*') {
return
}
} catch (e) {
return '/login'
}
});
export default Router