feat(projects): add custom route exception

Author: honghuangdc

build/plugins/router.ts

@@ -8,6 +8,9 @@ export function setupElegantRouter() {
       base: 'src/layouts/base-layout/index.vue',
       blank: 'src/layouts/blank-layout/index.vue'
     },
+    customRoutes: {
+      names: ['exception_403', 'exception_404', 'exception_500']
+    },
     routePathTransformer(routeName, routePath) {
       const key = routeName as RouteKey;
 

package.json

@@ -60,7 +60,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
-    "@elegant-router/vue": "0.3.2",
+    "@elegant-router/vue": "0.3.4",
     "@iconify/json": "2.2.170",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",

pnpm-lock.yaml

@@ -121,7 +121,11 @@ const local: App.I18n.Schema = {
     'multi-menu_first_child': 'Menu One Child',
     'multi-menu_second': 'Menu Two',
     'multi-menu_second_child': 'Menu Two Child',
-    'multi-menu_second_child_home': 'Menu Two Child Home'
+    'multi-menu_second_child_home': 'Menu Two Child Home',
+    exception: 'Exception',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500'
   },
   page: {
     login: {

src/locales/langs/en-us.ts

@@ -121,7 +121,11 @@ const local: App.I18n.Schema = {
     'multi-menu_first_child': '菜单一子菜单',
     'multi-menu_second': '菜单二',
     'multi-menu_second_child': '菜单二子菜单',
-    'multi-menu_second_child_home': '菜单二子菜单首页'
+    'multi-menu_second_child_home': '菜单二子菜单首页',
+    exception: '异常页',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -143,6 +143,10 @@ function transformElegantRouteToVueRoute(
 const routeMap: RouteMap = {
   "root": "/",
   "not-found": "/:pathMatch(.*)*",
+  "exception": "/exception",
+  "exception_403": "/exception/403",
+  "exception_404": "/exception/404",
+  "exception_500": "/exception/500",
   "403": "/403",
   "404": "/404",
   "500": "/500",

src/router/elegant/transform.ts

@@ -23,6 +23,49 @@ const customRoutes: CustomRoute[] = [
       title: 'not-found',
       constant: true
     }
+  },
+  {
+    name: 'exception',
+    path: '/exception',
+    component: 'layout.base',
+    meta: {
+      title: 'exception',
+      i18nKey: 'route.exception',
+      icon: 'ant-design:exception-outlined',
+      order: 7
+    },
+    children: [
+      {
+        name: 'exception_403',
+        path: '/exception/403',
+        component: 'view.403',
+        meta: {
+          title: 'exception_403',
+          i18nKey: 'route.exception_403',
+          icon: 'ic:baseline-block'
+        }
+      },
+      {
+        name: 'exception_404',
+        path: '/exception/404',
+        component: 'view.404',
+        meta: {
+          title: 'exception_404',
+          i18nKey: 'route.exception_404',
+          icon: 'ic:baseline-web-asset-off'
+        }
+      },
+      {
+        name: 'exception_500',
+        path: '/exception/500',
+        component: 'view.500',
+        meta: {
+          title: 'exception_500',
+          i18nKey: 'route.exception_500',
+          icon: 'ic:baseline-wifi-off'
+        }
+      }
+    ]
   }
 ];
 

src/router/routes/index.ts

@@ -17,6 +17,10 @@ declare module "@elegant-router/types" {
   export type RouteMap = {
     "root": "/";
     "not-found": "/:pathMatch(.*)*";
+    "exception": "/exception";
+    "exception_403": "/exception/403";
+    "exception_404": "/exception/404";
+    "exception_500": "/exception/500";
     "403": "/403";
     "404": "/404";
     "500": "/500";
@@ -54,6 +58,10 @@ declare module "@elegant-router/types" {
     RouteKey,
     | "root"
     | "not-found"
+    | "exception"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
   >;
 
   /**
@@ -84,6 +92,7 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
+    | "exception"
   >;
 
   /**
@@ -113,6 +122,9 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
   >;
 
   /**
@@ -241,7 +253,7 @@ declare module "@elegant-router/types" {
           name: K;
           path: RouteMap[K];
           component: `layout.${RouteLayout}`;
-          children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<K>)[];
+          children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<GetChildRouteKey<K>>)[];
         }
       : never;