Vue中自动生成路由配置文件覆盖路由配置
设计思路
- 读取
@/views下所有index.vue如果当前文件下有包含相同路径则认为是它的子路由。 - 但也不能就这样写死，要创建
page.(ts|js)配置文件也可以更改当前的配置，Page.(ts|js)比重大于自动生成的路由配置。
踩坑点
坑点1
这里的'@/views'不能使用变量传入。
1 | (require as any).context('@/views', true, /index.vue$/) |
坑点2
这里如果想对文件进行深度拷贝，直接使用三点(…)是不行的，这里借助了loadsh中的merge完成深度拷贝。
1 2 3 4 5 6 7 8 | // 导出当前存在的路由并重新赋值const existingRoute = routeMap[route.path];// 当前路由存在if (existingRoute) { const exportRouteConfig = context(fileInfo?.filePath).default; // 使用loadsh合并对象 routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);} |
代码编写
在vue中自动生成路由，并将目录下配置文件覆盖到原先路由配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { routeFilenameHelper } from '@/utils/file/routeFileUtil';import _ from 'lodash';import { RouteRecordRaw } from 'vue-router';// * 最终路由const routeMap: Record = {};// * 所有处理的路由const contexts = [ { context: (require as any).context('@/views', true, /index.vue$/), isIndex: true }, { context: (require as any).context('@/views', true, /page.(ts|js)$/), isIndex: false },];/** * 构建路由信息 * @param context 上下文信息 * @param isIndex 是否第一次遍历 * @param route 路由内容 */function buildRouteTree(context: any, isIndex: boolean, route: any) { // 遍历当前子路由 context.keys().forEach((item: string) => { // 获取子路由下所有文件对象格式 const childrenFileInfo = routeFilenameHelper(item, '/'); // 组装子路由对象 const childrenRoute: any = { name: childrenFileInfo?.name, path: childrenFileInfo!.path, component: isIndex ? () => import(`@/views${childrenFileInfo?.replaceName}`) : undefined, children: [], meta: { isFullScreen: false }, }; // 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中 if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) { route.children.push(childrenRoute); } });}/** * 遍历路由信息 * @param context 路由上下文 * @param isIndex 是否为索引遍历 */const createRouteList = (context: any, isIndex: boolean) => { // 遍历文件下所有路径 context.keys().forEach((filePath: string) => { const fileInfo = routeFilenameHelper(filePath, '/'); // 组装路由对象 const route: RouteRecordRaw = { name: fileInfo?.name, path: fileInfo!.path, component: isIndex ? () => import(`@/views${fileInfo?.replaceName}`) : undefined, children: [], meta: { isFullScreen: false }, }; // * 如果是第一次遍历 初始化赋值 if (isIndex) { routeMap[route.path] = route; buildRouteTree(context, isIndex, route); } // * 读取配置文件中内容 else { // 导出当前存在的路由并重新赋值 const existingRoute = routeMap[route.path]; // 当前路由存在 if (existingRoute) { const exportRouteConfig = context(fileInfo?.filePath).default; // 使用loadsh合并对象 routeMap[route.path] = _.merge(existingRoute, exportRouteConfig); } } });};// * 生成路由信息contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));// * 返回生成好的路由export const pageRoutes: Array = Object.values(routeMap); |
到此这篇关于Vue中自动生成路由配置文件覆盖路由配置的文章就介绍到这了,更多相关vue自动生成路由配置文件内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
