refactor: 重构重置路由功能

mock/asyncRoutes.ts

@@ -4,6 +4,7 @@ import { MockMethod } from "vite-plugin-mock";
 // http://mockjs.com/examples.html#Object
 const systemRouter = {
   path: "/system",
+  name: "User",
   redirect: "/system/user/index",
   meta: {
     icon: "setting",
@@ -51,6 +52,7 @@ const systemRouter = {
 const permissionRouter = {
   path: "/permission",
   redirect: "/permission/page/index",
+  name: "PermissionPage",
   meta: {
     title: "menus.permission",
     icon: "lollipop",
@@ -77,6 +79,7 @@ const permissionRouter = {
 
 const frameRouter = {
   path: "/iframe",
+  name: "FramePure",
   redirect: "/iframe/pure",
   meta: {
     icon: "monitor",
@@ -113,6 +116,7 @@ const frameRouter = {
 const tabsRouter = {
   path: "/tabs",
   redirect: "/tabs/index",
+  name: "Tabs",
   meta: {
     icon: "IF-team-icontabs",
     title: "menus.hstabs",

src/api/routes.ts

@@ -1,5 +1,10 @@
 import { http } from "../utils/http";
 
-export const getAsyncRoutes = (params?: object) => {
+type Result = {
-  return http.request("get", "/getAsyncRoutes", { params });
+  code: number;
+  info: Array<any>;
+};
+
+export const getAsyncRoutes = (params?: object) => {
+  return http.request<Result>("get", "/getAsyncRoutes", { params });
 };

src/layout/hooks/useNav.ts

@@ -4,11 +4,11 @@ import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
-import { remainingPaths } from "/@/router";
 import type { StorageConfigs } from "/#/index";
 import { routerArrays } from "/@/layout/types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { remainingPaths, resetRouter } from "/@/router";
 import { i18nChangeLanguage } from "@wangeditor/editor";
 import { storageSession, useGlobal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
@@ -72,6 +72,10 @@ export function useNav() {
     useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
     storageSession.removeItem("info");
     router.push("/login");
+    resetRouter();
+    setTimeout(() => {
+      console.log("----", router.options.routes, router.getRoutes());
+    }, 3000);
   }
 
   function backHome() {

src/router/index.ts

@@ -98,6 +98,19 @@ export const router: Router = createRouter({
   }
 });
 
+// 重置路由
+export function resetRouter() {
+  router.getRoutes().forEach(route => {
+    const { name, meta } = route;
+    if (name && router.hasRoute(name) && meta?.backstage) {
+      router.removeRoute(name);
+      router.options.routes = formatTwoStageRoutes(
+        formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+      );
+    }
+  });
+}
+
 // 路由白名单
 const whiteList = ["/login"];
 

src/router/utils.ts

@@ -104,14 +104,14 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
   }
 }
 
-// 重置路由
+function addPathMatch() {
-function resetRouter(): void {
+  if (!router.hasRoute("pathMatch")) {
-  router.getRoutes().forEach(route => {
+    router.addRoute({
-    const { name } = route;
+      path: "/:pathMatch(.*)",
-    if (name) {
+      name: "pathMatch",
-      router.hasRoute(name) && router.removeRoute(name);
+      redirect: "/error/404"
-    }
+    });
-  });
+  }
 }
 
 // 初始化路由
@@ -146,10 +146,7 @@ function initRouter(name: string) {
         );
         usePermissionStoreHook().changeSetting(info);
       }
-      router.addRoute({
+      addPathMatch();
-        path: "/:pathMatch(.*)",
-        redirect: "/error/404"
-      });
     });
   });
 }
@@ -230,6 +227,8 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
   if (!arrRoutes || !arrRoutes.length) return;
   const modulesRoutesKeys = Object.keys(modulesRoutes);
   arrRoutes.forEach((v: RouteRecordRaw) => {
+    // 将backstage属性加入meta，标识此路由为后端返回路由
+    v.meta.backstage = true;
     if (v.redirect) {
       v.component = Layout;
     } else if (v.meta?.frameSrc) {
@@ -295,7 +294,6 @@ export {
   ascending,
   filterTree,
   initRouter,
-  resetRouter,
   hasPermissions,
   getHistoryMode,
   addAsyncRoutes,