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

2025-08-27 14:47:28 +08:00 · 2021-03-17 00:10:16 +08:00
parent 3732016062
commit e12c588c0a
21 changed files with 275 additions and 345 deletions
--- a/src/router/constant.ts
+++ b/src/router/constant.ts
@@ -1,9 +1,7 @@
-import type { AppRouteRecordRaw } from '/@/router/types';
-import ParentLayout from '/@/layouts/page/ParentView.vue';
-import { t } from '/@/hooks/web/useI18n';
-
 export const REDIRECT_NAME = 'Redirect';

+export const PARENT_LAYOUT_NAME = 'ParentLayout';
+
 export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');

 /**
@@ -12,78 +10,23 @@ export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exceptio
 export const LAYOUT = () => import('/@/layouts/default/index.vue');

 /**
- * @description: page-layout
+ * @description: parent-layout
 */
-export const getParentLayout = (name: string) => {
+export const getParentLayout = (_name?: string) => {
  return () =>
    new Promise((resolve) => {
      resolve({
-        ...ParentLayout,
-        name,
+        name: PARENT_LAYOUT_NAME,
      });
    });
 };

-// 404 on a page
-export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
-  path: '/:path(.*)*',
-  name: 'ErrorPage',
-  component: LAYOUT,
-  meta: {
-    title: 'ErrorPage',
-    hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: 'ErrorPage',
-      component: EXCEPTION_COMPONENT,
-      meta: {
-        title: 'ErrorPage',
-        hideBreadcrumb: true,
-      },
-    },
-  ],
-};
-
-export const REDIRECT_ROUTE: AppRouteRecordRaw = {
-  path: '/redirect',
-  name: REDIRECT_NAME,
-  component: LAYOUT,
-  meta: {
-    title: REDIRECT_NAME,
-    hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: '/redirect/:path(.*)',
-      name: REDIRECT_NAME,
-      component: () => import('/@/views/sys/redirect/index.vue'),
-      meta: {
-        title: REDIRECT_NAME,
-        hideBreadcrumb: true,
-      },
-    },
-  ],
-};
-
-export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
-  path: '/error-log',
-  name: 'errorLog',
-  component: LAYOUT,
-  meta: {
-    title: 'ErrorLog',
-    hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: 'list',
-      name: 'errorLogList',
-      component: () => import('/@/views/sys/error-log/index.vue'),
-      meta: {
-        title: t('routes.basic.errorLogList'),
-        hideBreadcrumb: true,
-      },
-    },
-  ],
-};
+// export const getParentLayout = (name: string) => {
+//   return () =>
+//     new Promise((resolve) => {
+//       resolve({
+//         ...ParentLayout,
+//         name,
+//       });
+//     });
+// };
--- a/src/router/guard/permissionGuard.ts
+++ b/src/router/guard/permissionGuard.ts
@@ -5,7 +5,7 @@ import { permissionStore } from '/@/store/modules/permission';
 import { PageEnum } from '/@/enums/pageEnum';
 import { userStore } from '/@/store/modules/user';

-import { PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';

 const LOGIN_PATH = PageEnum.BASE_LOGIN;

--- a/src/router/helper/menuHelper.ts
+++ b/src/router/helper/menuHelper.ts
@@ -1,44 +1,34 @@
 import { AppRouteModule } from '/@/router/types';
 import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types';

-import { findPath, forEach, treeMap } from '/@/utils/helper/treeHelper';
+import { findPath, treeMap } from '/@/utils/helper/treeHelper';
 import { cloneDeep } from 'lodash-es';
 import { isUrl } from '/@/utils/is';

-export function getAllParentPath(treeData: any[], path: string) {
+export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
  const menuList = findPath(treeData, (n) => n.path === path) as Menu[];
  return (menuList || []).map((item) => item.path);
 }

-// 拼接父级路径
-function joinParentPath(list: any, node: any) {
-  let allPaths = getAllParentPath(list, node.path);
-
-  allPaths = allPaths.slice(0, allPaths.length - 1);
-  let parentPath = '';
-  if (Array.isArray(allPaths) && allPaths.length >= 2) {
-    parentPath = allPaths[allPaths.length - 1];
-  } else {
-    allPaths.forEach((p) => {
-      parentPath += /^\//.test(p) ? p : `/${p}`;
-    });
+function joinParentPath(menus: Menu[], parentPath = '') {
+  for (let index = 0; index < menus.length; index++) {
+    const menu = menus[index];
+    const p = menu.path.startsWith('/') ? menu.path : `/${menu.path}`;
+    const parent = isUrl(menu.path) ? menu.path : `${parentPath}${p}`;
+    menus[index].path = parent;
+    if (menu?.children?.length) {
+      joinParentPath(menu.children, parent);
+    }
  }
-  node.path = `${/^\//.test(node.path) ? node.path : `${parentPath}/${node.path}`}`.replace(
-    /\/\//g,
-    '/'
-  );
-  return node;
 }

-// 解析菜单模块
+// Parsing the menu module
 export function transformMenuModule(menuModule: MenuModule): Menu {
  const { menu } = menuModule;

  const menuList = [menu];
-  forEach(menuList, (m) => {
-    !isUrl(m.path) && joinParentPath(menuList, m);
-  });

+  joinParentPath(menuList);
  return menuList[0];
 }

@@ -54,17 +44,16 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) {
      routeList.push(item);
    }
  });
-  return treeMap(routeList, {
+  const list = treeMap(routeList, {
    conversion: (node: AppRouteRecordRaw) => {
-      const { meta: { title, icon, hideMenu = false } = {} } = node;
-
-      !isUrl(node.path) && joinParentPath(routeList, node);
+      const { meta: { title, hideMenu = false } = {} } = node;
      return {
+        ...(node.meta || {}),
        name: title,
-        icon,
-        path: node.path,
        hideMenu,
      };
    },
  });
+  joinParentPath(list);
+  return list;
 }
--- a/src/router/helper/routeHelper.ts
+++ b/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;
 }
--- a/src/router/menus/index.ts
+++ b/src/router/menus/index.ts
@@ -5,6 +5,7 @@ import { appStore } from '/@/store/modules/app';
 import { permissionStore } from '/@/store/modules/permission';
 import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
 import { filter } from '/@/utils/helper/treeHelper';
+import { isUrl } from '/@/utils/is';
 import router from '/@/router';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { pathToRegexp } from 'path-to-regexp';
@@ -19,8 +20,6 @@ Object.keys(modules).forEach((key) => {
  menuModules.push(...modList);
 });

-const reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
-
 // ===========================
 // ==========Helper===========
 // ===========================
@@ -40,18 +39,15 @@ const staticMenus: Menu[] = [];
 })();

 async function getAsyncMenus() {
-  // 前端角色控制菜单 直接取菜单文件
  return !isBackMode() ? staticMenus : permissionStore.getBackMenuListState;
 }

-// 获取菜单 树级
 export const getMenus = async (): Promise<Menu[]> => {
  const menus = await getAsyncMenus();
  const routes = router.getRoutes();
  return !isBackMode() ? filter(menus, basicFilter(routes)) : menus;
 };

-// 获取当前路径的顶级路径
 export async function getCurrentParentPath(currentPath: string) {
  const menus = await getAsyncMenus();

@@ -60,7 +56,7 @@ export async function getCurrentParentPath(currentPath: string) {
  return allParentPath?.[0];
 }

-// 获取1级菜单，删除children
+// Get the level 1 menu, delete children
 export async function getShallowMenus(): Promise<Menu[]> {
  const menus = await getAsyncMenus();
  const routes = router.getRoutes();
@@ -68,7 +64,7 @@ export async function getShallowMenus(): Promise<Menu[]> {
  return !isBackMode() ? shallowMenuList.filter(basicFilter(routes)) : shallowMenuList;
 }

-// 获取菜单的children
+// Get the children of the menu
 export async function getChildrenMenus(parentPath: string) {
  const menus = await getAsyncMenus();
  const parent = menus.find((item) => item.path === parentPath);
@@ -78,14 +74,10 @@ export async function getChildrenMenus(parentPath: string) {
  return !isBackMode() ? filter(parent.children, basicFilter(routes)) : parent.children;
 }

-// 通用过滤方法
 function basicFilter(routes: RouteRecordNormalized[]) {
  return (menu: Menu) => {
    const matchRoute = routes.find((route) => {
-      const match = route.path.match(reg)?.[0];
-      if (match && match === menu.path) {
-        return true;
-      }
+      if (isUrl(menu.path)) return true;

      if (route.meta?.carryParam) {
        return pathToRegexp(route.path).test(menu.path);
--- a/src/router/routes/basic.ts
+++ b/src/router/routes/basic.ts
@@ -0,0 +1,67 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
+
+// 404 on a page
+export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPage',
+      component: EXCEPTION_COMPONENT,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const REDIRECT_ROUTE: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: REDIRECT_NAME,
+  component: LAYOUT,
+  meta: {
+    title: REDIRECT_NAME,
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: REDIRECT_NAME,
+      component: () => import('/@/views/sys/redirect/index.vue'),
+      meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
+  path: '/error-log',
+  name: 'errorLog',
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorLog',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: 'list',
+      name: 'errorLogList',
+      component: () => import('/@/views/sys/error-log/index.vue'),
+      meta: {
+        title: t('routes.basic.errorLogList'),
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -1,10 +1,11 @@
 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';

-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '../constant';
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';

 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
+import { flatRoutes } from '/@/router/helper/routeHelper';

 const modules = import.meta.globEager('./modules/**/*.ts');

@@ -16,6 +17,9 @@ Object.keys(modules).forEach((key) => {
  routeModuleList.push(...modList);
 });

+// Multi-level routing conversion
+flatRoutes(routeModuleList);
+
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];

 export const RootRoute: AppRouteRecordRaw = {