🎈 perf:优化动态路由在首次加载时未匹配导致警告、路由不存在时保留错误路径

src/router/modules/remaining.ts

@@ -593,6 +593,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
         }
       }
       }
     ]
     ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/Error/404.vue'),
+    name: '',
+    meta: {
+      title: '404',
+      hidden: true,
+      breadcrumb: false
+    }
   }
   }
 ]
 ]
 
 

src/store/modules/permission.ts

@@ -40,10 +40,12 @@ export const usePermissionStore = defineStore('permission', {
         }
         }
         const routerMap: AppRouteRecordRaw[] = generateRoute(res)
         const routerMap: AppRouteRecordRaw[] = generateRoute(res)
         // 动态路由，404一定要放到最后面
         // 动态路由，404一定要放到最后面
+        // preschooler：vue-router@4以后已支持静态404路由，此处可不再追加
         this.addRouters = routerMap.concat([
         this.addRouters = routerMap.concat([
           {
           {
             path: '/:path(.*)*',
             path: '/:path(.*)*',
-            redirect: '/404',
+            // redirect: '/404',
+            component: () => import('@/views/Error/404.vue'),
             name: '404Page',
             name: '404Page',
             meta: {
             meta: {
               hidden: true,
               hidden: true,