vue动态路由搭建

一 先在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 传递给后端，来进行更改不同权限用户显示哪些路由