refactor(route): refactoring the routing multi-layer model close #215

src/router/helper/routeHelper.ts

@@ -1,22 +1,18 @@
 import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
-import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
+import type { Router, RouteRecordNormalized } from 'vue-router';
 
 import { getParentLayout, LAYOUT } from '/@/router/constant';
 import { cloneDeep } from 'lodash-es';
 import { warn } from '/@/utils/log';
+import { createRouter, createWebHashHistory } from 'vue-router';
 
 export type LayoutMapKey = 'LAYOUT';
 
 const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
 
-let dynamicViewsModules: Record<
-  string,
-  () => Promise<{
-    [key: string]: any;
-  }>
->;
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
 
-// 动态引入
+// Dynamic introduction
 function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
   dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
   if (!routes) return;
@@ -26,19 +22,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
     if (component) {
       item.component = dynamicImport(dynamicViewsModules, component as string);
     } else if (name) {
-      item.component = getParentLayout(name);
+      item.component = getParentLayout();
     }
     children && asyncImportRoute(children);
   });
 }
 
 function dynamicImport(
-  dynamicViewsModules: Record<
-    string,
-    () => Promise<{
-      [key: string]: any;
-    }>
-  >,
+  dynamicViewsModules: Record<string, () => Promise<Recordable>>,
   component: string
 ) {
   const keys = Object.keys(dynamicViewsModules);
@@ -84,18 +75,69 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
   return (routeList as unknown) as T[];
 }
 
-// Return to the new routing structure, not affected by the original example
-export function getRoute(route: RouteLocationNormalized): RouteLocationNormalized {
-  if (!route) return route;
-  const { matched, ...opt } = route;
-  return {
-    ...opt,
-    matched: (matched
-      ? matched.map((item) => ({
-          meta: item.meta,
-          name: item.name,
-          path: item.path,
-        }))
-      : undefined) as RouteRecordNormalized[],
-  };
+/**
+ * Convert multi-level routing to level 2 routing
+ */
+export function flatRoutes(routeModules: AppRouteModule[]) {
+  for (let index = 0; index < routeModules.length; index++) {
+    const routeModule = routeModules[index];
+    if (!isMultipleRoute(routeModule)) {
+      continue;
+    }
+    promoteRouteLevel(routeModule);
+  }
+}
+
+// Routing level upgrade
+function promoteRouteLevel(routeModule: AppRouteModule) {
+  // Use vue-router to splice menus
+  let router: Router | null = createRouter({
+    routes: [routeModule as any],
+    history: createWebHashHistory(),
+  });
+
+  const routes = router.getRoutes();
+  const children = cloneDeep(routeModule.children);
+  addToChildren(routes, children || [], routeModule);
+  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);
+    if (route) {
+      routeModule.children = routeModule.children || [];
+      routeModule.children?.push(route as any);
+      if (child.children?.length) {
+        addToChildren(routes, child.children, routeModule);
+      }
+    }
+  }
+}
+
+// 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;
 }