perf: 优化当捕获所有未匹配路由并跳转全屏404页面的时机

src/router/modules/remaining.ts

@@ -8,8 +8,7 @@ export default [
     component: () => import("@/views/login/index.vue"),
     meta: {
       title: $t("menus.pureLogin"),
-      showLink: false,
-      rank: 101
+      showLink: false
     }
   },
   // 全屏403（无权访问）页面
@@ -19,19 +18,7 @@ export default [
     component: () => import("@/views/error/403.vue"),
     meta: {
       title: $t("menus.pureAccessDenied"),
-      showLink: false,
-      rank: 102
-    }
-  },
-  // 全屏404（页面不存在）页面
-  {
-    path: "/:pathMatch(.*)*",
-    name: "PageNotFound",
-    component: () => import("@/views/error/404.vue"),
-    meta: {
-      title: $t("menus.purePageNotFound"),
-      showLink: false,
-      rank: 103
+      showLink: false
     }
   },
   // 全屏500（服务器出错）页面
@@ -41,8 +28,7 @@ export default [
     component: () => import("@/views/error/500.vue"),
     meta: {
       title: $t("menus.pureServerError"),
-      showLink: false,
-      rank: 104
+      showLink: false
     }
   },
   {
@@ -50,8 +36,7 @@ export default [
     component: Layout,
     meta: {
       title: $t("status.pureLoad"),
-      showLink: false,
-      rank: 105
+      showLink: false
     },
     children: [
       {
@@ -67,8 +52,7 @@ export default [
     component: () => import("@/views/account-settings/index.vue"),
     meta: {
       title: $t("buttons.pureAccountSettings"),
-      showLink: false,
-      rank: 106
+      showLink: false
     }
   },
   // 下面是一个无layout菜单的例子（一个全屏空白页面），因为这种情况极少发生，所以只需要在前端配置即可（配置路径：src/router/modules/remaining.ts）
@@ -78,8 +62,7 @@ export default [
     component: () => import("@/views/empty/index.vue"),
     meta: {
       title: $t("menus.pureEmpty"),
-      showLink: false,
-      rank: 107
+      showLink: false
     }
   }
 ] satisfies Array<RouteConfigsTable>;

src/router/utils.ts

@@ -139,6 +139,21 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
   }
 }
 
+/** 动态路由注册完成后，再添加全屏404（页面不存在）页面，避免刷新动态路由页面时误跳转到404页面 */
+function addPathMatch() {
+  if (!router.hasRoute("pathMatch")) {
+    router.addRoute({
+      path: "/:pathMatch(.*)*",
+      name: "PageNotFound",
+      component: () => import("@/views/error/404.vue"),
+      meta: {
+        title: "menus.purePageNotFound",
+        showLink: false
+      }
+    });
+  }
+}
+
 /** 处理动态路由（后端返回的路由） */
 function handleAsyncRoutes(routeList) {
   if (routeList.length === 0) {
@@ -178,6 +193,7 @@ function handleAsyncRoutes(routeList) {
       )
     ]);
   }
+  addPathMatch();
 }
 
 /** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
@@ -386,6 +402,7 @@ export {
   filterTree,
   initRouter,
   getTopMenu,
+  addPathMatch,
   isOneOfArray,
   getHistoryMode,
   addAsyncRoutes,