refactor(projects): 单独路由逻辑重构、路由转换函数优化

src/utils/router/component.ts

@@ -30,7 +30,7 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
     'dashboard_workbench',
     'about',
     'multi-menu_first_second',
-    'redirect-not-found'
+    'not-found-page'
   ];
 
   const key = keys.includes(routeKey as ViewComponentKey) ? (routeKey as ViewComponentKey) : 'not-found';
@@ -44,7 +44,7 @@ export function getViewComponent(routeKey: AuthRoute.RouteKey) {
     dashboard_workbench: DashboardWorkbench,
     about: About,
     'multi-menu_first_second': MultiMenuFirstSecond,
-    'redirect-not-found': NotFound
+    'not-found-page': NotFound
   };
 
   return () => setViewComponentName(viewComponent[key], key) as Promise<Component>;

src/utils/router/helpers.ts

@@ -9,15 +9,12 @@ type ComponentAction = {
 
 /** 将权限路由类型转换成vue路由类型 */
 export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
-  const { name, path, meta } = item;
-  const itemRoute: Partial<RouteRecordRaw> = {
-    name,
-    path,
-    meta
-  };
-  if (hasRedirect(item)) {
-    itemRoute.redirect = item.redirect;
+  const itemRoute = { ...item } as RouteRecordRaw;
+
+  if (hasDynamicPath(item)) {
+    Object.assign(itemRoute, { path: item.meta.dynamicPath });
   }
+
   if (hasComponent(item)) {
     const action: ComponentAction = {
       layout() {
@@ -29,7 +26,14 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
           itemRoute.meta.blankLayout = true;
         }
       },
-      multi() {},
+      multi() {
+        // 多级路由一定有子路由
+        if (hasChildren(item)) {
+          Object.assign(itemRoute, { component: Layout });
+        } else {
+          consoleError('多级路由缺少子路由: ', item);
+        }
+      },
       self() {
         itemRoute.component = getViewComponent(item.name);
       }
@@ -41,116 +45,59 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
     }
   }
 
-  if (hasProps(item)) {
-    (itemRoute as any).props = item.props;
-  }
-
+  // 注意：单独路由没有children
   if (isSingleRoute(item)) {
-    if (item.name === 'redirect-not-found') {
+    if (hasChildren(item)) {
+      consoleError('单独路由不应该有子路由: ', item);
+    }
+
+    // 捕获无效路由的需特殊处理
+    if (item.name === 'not-found-page') {
       itemRoute.children = [
         {
           path: '',
           name: item.name,
-          component: getViewComponent('redirect-not-found')
+          component: getViewComponent('not-found-page')
         }
       ];
-      return itemRoute as RouteRecordRaw;
+    } else {
+      const parentPath = `${itemRoute.path}-parent` as AuthRoute.SingleRouteParentPath;
+
+      if (item.meta.singleLayout === 'blank') {
+        itemRoute.meta!.blankLayout = true;
+      }
+
+      const parentRoute: RouteRecordRaw = {
+        path: parentPath,
+        component: Layout,
+        redirect: item.path,
+        children: [itemRoute]
+      };
+
+      return parentRoute;
     }
-    const singleRoute = {
-      ...itemRoute
-    };
-    Object.assign(singleRoute, { component: getViewComponent(item.name) });
-
-    const singlePath = (
-      hasSingleOriginPath(item) ? item.meta.singleOriginPath : item.path
-    ) as AuthRoute.SingleRoutePath;
-    const parenPath = `${singlePath}-parent` as AuthRoute.SingleRouteParentPath;
-
-    const parentRoute: Partial<RouteRecordRaw> = {
-      path: parenPath,
-      component: itemRoute.component,
-      redirect: singlePath,
-      children: [singleRoute as RouteRecordRaw]
-    };
-    return parentRoute as RouteRecordRaw;
   }
+
   if (hasChildren(item)) {
-    itemRoute.children = item.children!.map(child => transformAuthRouteToVueRoute(child)) as RouteRecordRaw[];
+    itemRoute.redirect = item.children![0].path;
+    itemRoute.children = item.children!.map(child => transformAuthRouteToVueRoute(child));
   }
 
-  return itemRoute as RouteRecordRaw;
+  return itemRoute;
 }
 
 function hasComponent(item: AuthRoute.Route) {
   return Boolean(item.component);
 }
 
-function hasRedirect(item: AuthRoute.Route) {
-  return Boolean(item.redirect);
-}
-
 function hasChildren(item: AuthRoute.Route) {
   return Boolean(item.children && item.children.length);
 }
 
-function hasProps(item: AuthRoute.Route) {
-  return Boolean(item.props);
+function hasDynamicPath(item: AuthRoute.Route) {
+  return Boolean(item.meta.dynamicPath);
 }
 
 function isSingleRoute(item: AuthRoute.Route) {
-  return Boolean(item.meta.single);
-}
-
-function hasSingleOriginPath(item: AuthRoute.Route) {
-  return Boolean(item.meta.singleOriginPath);
-}
-
-/**
- * 根据路由key获取AuthRoute数据
- * @param key - 路由key
- * @param routes - 路由
- */
-export function findAuthRouteByKey(key: AuthRoute.RouteKey, routes: AuthRoute.Route[]) {
-  const paths = getRouteKeyPathsByKey(key);
-  const route = recursiveFindRouteByPaths(paths, routes);
-
-  return route;
-}
-
-/**
- * 根据路由key的paths获递归取路由
- * @param paths - 路由key的路径
- * @param routes - 路由
- */
-function recursiveFindRouteByPaths(
-  paths: AuthRoute.RouteKey[],
-  routes: AuthRoute.Route[]
-): AuthRoute.Route | undefined {
-  const item = routes.find(route => paths.length && route.name === paths[0]);
-
-  if (item && hasComponent(item)) {
-    return recursiveFindRouteByPaths(paths.slice(1), item.children!);
-  }
-  return item;
-}
-
-/**
- * 根据路由key获取从第一级路由到当前路由key的paths
- * @param key - 路由key
- */
-function getRouteKeyPathsByKey(key: AuthRoute.RouteKey) {
-  const splitMark: AuthRoute.RouteSplitMark = '_';
-  const keys = key.split(splitMark);
-  const keyPaths: AuthRoute.RouteKey[] = [];
-
-  keys.forEach((itemKey, index) => {
-    if (index === 0) {
-      keyPaths.push(itemKey as AuthRoute.RouteKey);
-    } else {
-      const concatKey = keyPaths[index - 1] + splitMark + itemKey;
-      keyPaths.push(concatKey as AuthRoute.RouteKey);
-    }
-  });
-
-  return keyPaths;
+  return Boolean(item.meta.singleLayout);
 }

src/utils/router/index.ts

@@ -1,2 +1,3 @@
 export * from './helpers';
+export * from './menu';
 export * from './regexp';

src/utils/router/menu.ts

@@ -0,0 +1,51 @@
+import type { GlobalMenuOption } from '@/interface';
+import { iconifyRender } from '../common';
+
+/** 路由不转换菜单 */
+function hideInMenu(route: AuthRoute.Route) {
+  return Boolean(route.meta.hide);
+}
+
+/** 给菜单添加可选属性 */
+function addPartialProps(menuItem: GlobalMenuOption, icon?: string, children?: GlobalMenuOption[]) {
+  const item = { ...menuItem };
+  if (icon) {
+    Object.assign(item, { icon: iconifyRender(icon) });
+  }
+  if (children) {
+    Object.assign(item, { children });
+  }
+  return item;
+}
+
+/**
+ * 将权限路由转换成菜单
+ * @param routes - 路由
+ */
+export function transformAuthRouteToMenu(routes: AuthRoute.Route[]) {
+  const globalMenu: GlobalMenuOption[] = [];
+  routes.forEach(route => {
+    const { name, path, meta } = route;
+    const routeName = name as string;
+    let menuChildren: GlobalMenuOption[] | undefined;
+    if (route.children) {
+      menuChildren = transformAuthRouteToMenu(route.children);
+    }
+    const menuItem: GlobalMenuOption = addPartialProps(
+      {
+        key: routeName,
+        label: meta.title,
+        routeName,
+        routePath: path
+      },
+      meta?.icon,
+      menuChildren
+    );
+
+    if (!hideInMenu(route)) {
+      globalMenu.push(menuItem);
+    }
+  });
+
+  return globalMenu;
+}