1、需求描述
从别处导出的可用前端文件,存放在系统@/views/下,不配置静态路由,当访问改菜单时,根据当前菜单的path动态向主界面(路由path: '/', name:'homePage')中添加子路由,使其页面可正常访问
注:当前菜单的path,为当前菜单文件存放的路径,如:菜单path为dynamicTest/dynamicTestList的存放位置为@/views/dynamicTest/dynamicTestList.vue
2、解决思路
使用路由beforeEach全局守卫,若当前菜单不在静态路由中,则动态向主界面添加当前菜单的子路由
3、解决过程
1)遍历所有页面文件
注:vue2+vite2+ts项目使用import.meta.globEager方法遍历文件,vue2+webpack+ts项目使用require.context方法遍历文件
2)添加router.beforeEach全局路由守卫
3)判断to.path是否已配置过静态路由,是则执行next(),否则判断to.path对用文件是否存在@/views/文件夹下,是则执行4),否则执行next()
4)定义临时路由变量({name: to.path,path: to.path,component: () => import(文件路径)},并使用router.addRoute方法添加主界面/的子路由
5)vue2+vite2+ts项目具体代码如下:
import { Route, NavigationGuardNext, Location } from 'vue-router';
import router from './router/router'; // 遍历views文件夹下所有的文件 const requireComponent1: any = import.meta.globEager('./views/*.vue'); const requireComponent2: any = import.meta.globEager('./views/**/*.vue'); const requireComponent = {...requireComponent1, ...requireComponent2}; let toPathObj: any = {};
// 全局路由守卫 router.beforeEach(async (to: Route, from: Route, next: NavigationGuardNext) => {
const allRoutes: any = router.getRoutes();
// 判断是否已添加静态路由 const incCurRoute: any = allRoutes.findIndex((it: any) => it.path === to.path) > -1; if(incCurRoute) { next(); return; } // 判断是否已添加动态路由 if(!toPathObj.hasOwnProperty(to.path)) {
// 判断@/views文件夹下是否存在该路由文件 const isIncKey: any = Object.keys(requireComponent).find((key: any) => key.indexOf(to.path) > -1); if(isIncKey) { toPathObj[to.path] = isIncKey; const curRoute: any = { name: to.path, path: to.path, meta: {}, component: () => import(isIncKey), };
// 向name为'homePage'的路由中添加子路由 router.addRoute('homePage', curRoute); next({ ...(to as Location), replace: true }); return; } } next(); }); router.afterEach(() => {});
标签:vue,const,views,path,addRoute,router,any,路由 From: https://www.cnblogs.com/zy2gq/p/16615492.html