feat: 添加全屏403、404、500页面，全屏错误页面清晰且安全，提升用户体验 (#1226)

src/router/modules/error.ts

@@ -16,7 +16,7 @@ export default {
       name: "403",
       component: () => import("@/views/error/403.vue"),
       meta: {
-        title: $t("menus.pureFourZeroOne")
+        title: $t("menus.pureAccessDenied")
       }
     },
     {
@@ -24,7 +24,7 @@ export default {
       name: "404",
       component: () => import("@/views/error/404.vue"),
       meta: {
-        title: $t("menus.pureFourZeroFour")
+        title: $t("menus.purePageNotFound")
       }
     },
     {
@@ -32,7 +32,7 @@ export default {
       name: "500",
       component: () => import("@/views/error/500.vue"),
       meta: {
-        title: $t("menus.pureFive")
+        title: $t("menus.pureServerError")
       }
     }
   ]

src/router/modules/remaining.ts

@@ -12,13 +12,46 @@ export default [
       rank: 101
     }
   },
+  // 全屏403（无权访问）页面
+  {
+    path: "/access-denied",
+    name: "AccessDenied",
+    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
+    }
+  },
+  // 全屏500（服务器出错）页面
+  {
+    path: "/server-error",
+    name: "ServerError",
+    component: () => import("@/views/error/500.vue"),
+    meta: {
+      title: $t("menus.pureServerError"),
+      showLink: false,
+      rank: 104
+    }
+  },
   {
     path: "/redirect",
     component: Layout,
     meta: {
       title: $t("status.pureLoad"),
       showLink: false,
-      rank: 102
+      rank: 105
     },
     children: [
       {
@@ -28,6 +61,16 @@ export default [
       }
     ]
   },
+  {
+    path: "/account-settings",
+    name: "AccountSettings",
+    component: () => import("@/views/account-settings/index.vue"),
+    meta: {
+      title: $t("buttons.pureAccountSettings"),
+      showLink: false,
+      rank: 106
+    }
+  },
   // 下面是一个无layout菜单的例子（一个全屏空白页面），因为这种情况极少发生，所以只需要在前端配置即可（配置路径：src/router/modules/remaining.ts）
   {
     path: "/empty",
@@ -36,17 +79,7 @@ export default [
     meta: {
       title: $t("menus.pureEmpty"),
       showLink: false,
-      rank: 103
-    }
-  },
-  {
-    path: "/account-settings",
-    name: "AccountSettings",
-    component: () => import("@/views/account-settings/index.vue"),
-    meta: {
-      title: $t("buttons.pureAccountSettings"),
-      showLink: false,
-      rank: 104
+      rank: 107
     }
   }
 ] satisfies Array<RouteConfigsTable>;