Vue中自动生成路由配置文件覆盖路由配置的思路详解

我的名字叫馆陶

Vue中自动生成路由配置文件覆盖路由配置


设计思路

• 读取
  1. @/views

  复制代码
  下所有
  1. index.vue

  复制代码
  如果当前文件下有包含相同路径则认为是它的子路由。
  
• 但也不能就这样写死，要创建
  1. page.(ts|js)

  复制代码
  配置文件也可以更改当前的配置，
  1. Page.(ts|js)

  复制代码
  比重大于自动生成的路由配置。
  

踩坑点


坑点1

这里的

1. '@/views'

复制代码

不能使用变量传入。

1. (require as any).context('@/views', true, /index\.vue$/)

复制代码

坑点2

这里如果想对文件进行深度拷贝，直接使用三点(…)是不行的，这里借助了

1. loadsh

复制代码

中的

1. merge

复制代码

完成深度拷贝。

1. // 导出当前存在的路由并重新赋值
   
2. const existingRoute = routeMap[route.path];
   
3. // 当前路由存在
   
4. if (existingRoute) {
   
5.     const exportRouteConfig = context(fileInfo?.filePath).default;
   
6.     // 使用loadsh合并对象
   
7.     routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
   
8. }

复制代码

代码编写

在vue中自动生成路由，并将目录下配置文件覆盖到原先路由配置。

1. import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
   
2. import _ from 'lodash';
   
3. import { RouteRecordRaw } from 'vue-router';
   
4. // * 最终路由
   
5. const routeMap: Record<string, RouteRecordRaw> = {};
   
6. // * 所有处理的路由
   
7. const contexts = [
   
8.         { context: (require as any).context('@/views', true, /index\.vue$/), isIndex: true },
   
9.         { context: (require as any).context('@/views', true, /page\.(ts|js)$/), isIndex: false },
   
10. ];
    
11. /**
    
12. * 构建路由信息
    
13. * @param context 上下文信息
    
14. * @param isIndex 是否第一次遍历
    
15. * @param route 路由内容
    
16. */
    
17. function buildRouteTree(context: any, isIndex: boolean, route: any) {
    
18.         // 遍历当前子路由
    
19.         context.keys().forEach((item: string) => {
    
20.                 // 获取子路由下所有文件对象格式
    
21.                 const childrenFileInfo = routeFilenameHelper(item, '/');
    
22.                 // 组装子路由对象
    
23.                 const childrenRoute: any = {
    
24.                         name: childrenFileInfo?.name,
    
25.                         path: childrenFileInfo!.path,
    
26.                         component: isIndex ? () => import(`@/views${childrenFileInfo?.replaceName}`) : undefined,
    
27.                         children: [],
    
28.                         meta: { isFullScreen: false },
    
29.                 };
    
30.                 // 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
    
31.                 if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
    
32.                         route.children.push(childrenRoute);
    
33.                 }
    
34.         });
    
35. }
    
36. /**
    
37. * 遍历路由信息
    
38. * @param context 路由上下文
    
39. * @param isIndex 是否为索引遍历
    
40. */
    
41. const createRouteList = (context: any, isIndex: boolean) => {
    
42.         // 遍历文件下所有路径
    
43.         context.keys().forEach((filePath: string) => {
    
44.                 const fileInfo = routeFilenameHelper(filePath, '/');
    
45.                 // 组装路由对象
    
46.                 const route: RouteRecordRaw = {
    
47.                         name: fileInfo?.name,
    
48.                         path: fileInfo!.path,
    
49.                         component: isIndex ? () => import(`@/views${fileInfo?.replaceName}`) : undefined,
    
50.                         children: [],
    
51.                         meta: { isFullScreen: false },
    
52.                 };
    
53.                 // * 如果是第一次遍历 初始化赋值
    
54.                 if (isIndex) {
    
55.                         routeMap[route.path] = route;
    
56.                         buildRouteTree(context, isIndex, route);
    
57.                 }
    
58.                 // * 读取配置文件中内容
    
59.                 else {
    
60.                         // 导出当前存在的路由并重新赋值
    
61.                         const existingRoute = routeMap[route.path];
    
62.                         // 当前路由存在
    
63.                         if (existingRoute) {
    
64.                                 const exportRouteConfig = context(fileInfo?.filePath).default;
    
65.                                 // 使用loadsh合并对象
    
66.                                 routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
    
67.                         }
    
68.                 }
    
69.         });
    
70. };
    
71. // * 生成路由信息
    
72. contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));
    
73. // * 返回生成好的路由
    
74. export const pageRoutes: Array<RouteRecordRaw> = Object.values(routeMap);

复制代码

到此这篇关于Vue中自动生成路由配置文件覆盖路由配置的文章就介绍到这了,更多相关vue自动生成路由配置文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/320896v5c.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！