一 先在router中index文件中写好静态路由如 登录 404页面
{
path: "/login",
component: () => import("@/views/login/index.vue"),
meta: { hidden: true },
},
{
path: "404",
component: () => import("@/views/error-page/404.vue"),
meta: { hidden: true },
},
二 在router.beforeEach中 通过接口获取该用户的权限,然后通过权限去获取该用户的路由表
const { roles } = await userStore.getUserInfo();
const accessRoutes = await permissionStore.generateRoutes(roles);
三 根据获取的路由表中component 地址通过require.context('../../views/', true, /\.vue$/) 进行寻找文件地址,vite可以通过import.meta.glob("../../views//.vue");
在vue-cil中使用 require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则
const reqRouter = require.context('@/views', true, /\.vue$/) //获取文件夹下的所有以vue为后缀的文件
reqRouter.keys().forEach(key => {
let reqRouterDefault = reqRouter(key).default
if (!reqRouterDefault.commonComponent) { //公共组件不参与路由配置,公共组件配置true
let fileUrl = key.replace(/\.\//g, '')//匹配路径
let routePath = fileUrl.split('.')[0];
autoLoadRoutes.push({
path: `/${routePath}`,
name: routePath,
meta: {
title: reqRouterDefault.title,
keepAlive: reqRouterDefault.keepAlive
},
component: () => import(`@/views/${fileUrl}`) //使用箭头函数异步加载组件
})
}
})
在vite中使用import.meta.glob("../../views/**/**.vue");
const modules = import.meta.glob("../../views/**/**.vue"); //获取views文件夹下所有以vue为后缀的文件
const component = modules[`../../views/${tmpRoute.component}.vue`]; 将匹配到的页面地址以箭头函数的形式保存
如
后端返回的component: "system/user/index" 通过modules[`../../views/${tmpRoute.component}.vue`]转化为component:()=>{
"../../views/system/user/index.vue"
}
四 将动态路由通过router.addRoute 添加到路由表中
router.addRoute(route);
route格式为{
children:{} //子路由地址
component:() => import("/src/layout/index.vue
meta:{} 元数据 路由权限验证
name:‘’路由名称
path:‘’跳转地址
}
五 通过router.beforeEach中 的next 跳转到首页
next("/system/user");//首页地址
六 退出的时候通过 resetRoute 重置路由表
重置路由回到登录页
export function resetRouter() {
router.getRoutes().forEach((route) => {
const { name, meta } = route
if (name && meta.roles?.length) {
router.hasRoute(name) && router.removeRoute(name) //删除之前添加的路由
}
})
}
七 通过meta中的权限名称在权限管理页面 将权限 和动态路由id 传递给后端,来进行更改不同权限用户显示哪些路由