refactor(projects): 路由文件夹重构

src/utils/router/cache.ts

@@ -0,0 +1,35 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+function getCacheName(route: RouteRecordRaw, isCache: boolean) {
+  const cacheNames: string[] = [];
+  const hasChild = hasChildren(route);
+  if (isCache && !hasChild) {
+    const name = route.name as string;
+    cacheNames.push(name);
+  }
+  if (hasChild) {
+    const children = route.children as RouteRecordRaw[];
+    children.forEach(item => {
+      const isChildCache = isCache || isKeepAlive(item);
+      cacheNames.push(...getCacheName(item, isChildCache));
+    });
+  }
+  return cacheNames;
+}
+
+function isKeepAlive(route: RouteRecordRaw) {
+  return Boolean(route?.meta?.keepAlive);
+}
+function hasChildren(route: RouteRecordRaw) {
+  return Boolean(route.children && route.children.length);
+}
+
+/** 获取被缓存的路由 */
+export default function getCacheRoutes(routes: RouteRecordRaw[]) {
+  const cacheNames: string[] = [];
+  routes.forEach(route => {
+    const isCache = isKeepAlive(route);
+    cacheNames.push(...getCacheName(route, isCache));
+  });
+  return cacheNames;
+}

src/utils/router/helpers.ts

@@ -0,0 +1,47 @@
+import type { Component } from 'vue';
+import { EnumRoutePath } from '@/enum';
+import type { RoutePathKey, CustomRoute } from '@/interface';
+import { router } from '@/router';
+
+/** 获取路由name map */
+function getRouteNameMap() {
+  return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
+}
+
+/** 路由名称 */
+export const ROUTE_NAME_MAP = getRouteNameMap();
+
+/** 给需要缓存的页面组件设置名称 */
+export function setRouterCacheName(component: Component, name?: string) {
+  if (name) {
+    Object.assign(component, { name });
+  }
+}
+
+/** 获取登录后的重定向地址 */
+export function getLoginRedirectUrl() {
+  const path = router.currentRoute.value.fullPath as EnumRoutePath;
+  const redirectUrl = path === EnumRoutePath.root ? undefined : path;
+  return redirectUrl;
+}
+
+/**
+ * 设置单个路由
+ * @param route - 路由
+ * @param notFoundName - 404未找到的路由名称
+ * @param container - 路由容器
+ */
+export function setSingleRoute(container: Component, route: CustomRoute) {
+  const routeItem: CustomRoute = {
+    name: `${route.name as string}_`,
+    path: `${route.path}_`,
+    component: container,
+    redirect: { name: ROUTE_NAME_MAP.get('not-found') },
+    meta: {
+      isNotMenu: true
+    },
+    children: [route]
+  };
+
+  return routeItem;
+}

src/utils/router/index.ts

@@ -1,23 +1,3 @@
-import type { Component } from 'vue';
-import { EnumRoutePath } from '@/enum';
-import type { RoutePathKey } from '@/interface';
-import { router } from '@/router';
-
-/** 获取路由name map */
-export function getRouteNameMap() {
-  return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
-}
-
-/** 给需要缓存的页面组件设置名称 */
-export function setRouterCacheName(component: Component, name?: string) {
-  if (name) {
-    Object.assign(component, { name });
-  }
-}
-
-// 获取登录后的重定向地址
-export function getLoginRedirectUrl() {
-  const path = router.currentRoute.value.fullPath as EnumRoutePath;
-  const redirectUrl = path === EnumRoutePath.root ? undefined : path;
-  return redirectUrl;
-}
+export { ROUTE_NAME_MAP, setRouterCacheName, getLoginRedirectUrl, setSingleRoute } from './helpers';
+export { default as getCacheRoutes } from './cache';
+export { default as transformRouteToMenu } from './menus';

src/utils/router/menus.ts

@@ -0,0 +1,48 @@
+import type { Component } from 'vue';
+import type { CustomRoute, GlobalMenuOption } from '@/interface';
+import { dynamicIconRender } from '@/utils';
+
+/** 判断路由是否作为菜单 */
+function asMenu(route: CustomRoute) {
+  return !route.meta?.isNotMenu;
+}
+
+/** 给菜单添加可选属性 */
+function addPartialProps(menuItem: GlobalMenuOption, icon?: Component, children?: GlobalMenuOption[]) {
+  const item = { ...menuItem };
+  if (icon) {
+    Object.assign(item, { icon: dynamicIconRender(icon) });
+  }
+  if (children) {
+    Object.assign(item, { children });
+  }
+  return item;
+}
+
+export default function transformRouteToMenu(routes: CustomRoute[]) {
+  const globalMenu: GlobalMenuOption[] = [];
+  routes.forEach(route => {
+    const { name, path, meta } = route;
+    const routeName = name as string;
+    let menuChildren: GlobalMenuOption[] | undefined;
+    if (route.children) {
+      menuChildren = transformRouteToMenu(route.children as CustomRoute[]);
+    }
+    const menuItem: GlobalMenuOption = addPartialProps(
+      {
+        key: routeName,
+        label: meta?.title ?? routeName,
+        routeName,
+        routePath: path
+      },
+      meta?.icon,
+      menuChildren
+    );
+    if (asMenu(route)) {
+      globalMenu.push(menuItem);
+    } else if (menuChildren) {
+      globalMenu.push(...menuChildren);
+    }
+  });
+  return globalMenu;
+}