Blame view

src/router/helper/routeHelper.ts 4.62 KB
vben authored
1
import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
2
import type { Router, RouteRecordNormalized } from 'vue-router';
vben authored
3
4
5

import { getParentLayout, LAYOUT } from '/@/router/constant';
import { cloneDeep } from 'lodash-es';
vben authored
6
import { warn } from '/@/utils/log';
7
import { createRouter, createWebHashHistory } from 'vue-router';
vben authored
8
9
10
11
12
export type LayoutMapKey = 'LAYOUT';

const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
13
let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
14
15
// Dynamic introduction
vben authored
16
function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
Vben authored
17
  dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
vben authored
18
19
20
21
22
  if (!routes) return;
  routes.forEach((item) => {
    const { component, name } = item;
    const { children } = item;
    if (component) {
vben authored
23
      item.component = dynamicImport(dynamicViewsModules, component as string);
vben authored
24
    } else if (name) {
25
      item.component = getParentLayout();
vben authored
26
27
28
29
30
    }
    children && asyncImportRoute(children);
  });
}
31
function dynamicImport(
32
  dynamicViewsModules: Record<string, () => Promise<Recordable>>,
33
34
35
  component: string
) {
  const keys = Object.keys(dynamicViewsModules);
vben authored
36
  const matchKeys = keys.filter((key) => {
37
38
39
40
    let k = key.replace('../../views', '');
    const lastIndex = k.lastIndexOf('.');
    k = k.substring(0, lastIndex);
    return k === component;
vben authored
41
42
43
  });
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0];
44
    return dynamicViewsModules[matchKey];
vben authored
45
46
47
48
49
50
51
52
53
  }
  if (matchKeys?.length > 1) {
    warn(
      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
    );
    return;
  }
}
vben authored
54
55
// Turn background objects into routing objects
export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
56
57
  LayoutMap.set('LAYOUT', LAYOUT);
vben authored
58
59
60
  routeList.forEach((route) => {
    if (route.component) {
      if ((route.component as string).toUpperCase() === 'LAYOUT') {
61
62
        //route.component = LayoutMap.get(route.component as LayoutMapKey);
        route.component = LayoutMap.get((route.component as string).toUpperCase() as LayoutMapKey);
vben authored
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
      } else {
        route.children = [cloneDeep(route)];
        route.component = LAYOUT;
        route.name = `${route.name}Parent`;
        route.path = '';
        const meta = route.meta || {};
        meta.single = true;
        meta.affix = false;
        route.meta = meta;
      }
    }
    route.children && asyncImportRoute(route.children);
  });
  return (routeList as unknown) as T[];
}
79
80
81
/**
 * Convert multi-level routing to level 2 routing
 */
82
83
84
85
export function flatMultiLevelRoutes(routeModules: AppRouteModule[]) {
  const modules: AppRouteModule[] = cloneDeep(routeModules);
  for (let index = 0; index < modules.length; index++) {
    const routeModule = modules[index];
86
87
88
89
90
    if (!isMultipleRoute(routeModule)) {
      continue;
    }
    promoteRouteLevel(routeModule);
  }
91
  return modules;
92
93
94
95
96
97
}

// Routing level upgrade
function promoteRouteLevel(routeModule: AppRouteModule) {
  // Use vue-router to splice menus
  let router: Router | null = createRouter({
98
    routes: [(routeModule as unknown) as RouteRecordNormalized],
99
100
101
102
    history: createWebHashHistory(),
  });

  const routes = router.getRoutes();
103
  addToChildren(routes, routeModule.children || [], routeModule);
104
105
106
107
108
109
110
111
112
113
114
115
116
117
  router = null;

  routeModule.children = routeModule.children?.filter((item) => !item.children?.length);
}

// Add all sub-routes to the secondary route
function addToChildren(
  routes: RouteRecordNormalized[],
  children: AppRouteRecordRaw[],
  routeModule: AppRouteModule
) {
  for (let index = 0; index < children.length; index++) {
    const child = children[index];
    const route = routes.find((item) => item.name === child.name);
118
119
120
121
122
123
124
125
126
    if (!route) {
      continue;
    }
    routeModule.children = routeModule.children || [];
    if (!routeModule.children.find((item) => item.name === route.name)) {
      routeModule.children?.push((route as unknown) as AppRouteModule);
    }
    if (child.children?.length) {
      addToChildren(routes, child.children, routeModule);
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
    }
  }
}

// Determine whether the level exceeds 2 levels
function isMultipleRoute(routeModule: AppRouteModule) {
  if (!routeModule || !Reflect.has(routeModule, 'children') || !routeModule.children?.length) {
    return false;
  }

  const children = routeModule.children;

  let flag = false;
  for (let index = 0; index < children.length; index++) {
    const child = children[index];
    if (child.children?.length) {
      flag = true;
      break;
    }
  }
  return flag;
vben authored
148
}