feat(projects): new router system [新的路由系统]

src/router/guard/dynamic.ts

@@ -18,7 +18,7 @@ export async function createDynamicRouteGuard(
   if (!route.isInitAuthRoute) {
     // 未登录情况下直接回到登录页，登录成功后再加载权限路由
     if (!isLogin) {
-      const toName = to.name as AuthRoute.RouteKey;
+      const toName = to.name as AuthRoute.AllRouteKey;
       if (route.isValidConstantRoute(toName) && !to.meta.requiresAuth) {
         next();
       } else {
@@ -30,19 +30,19 @@ export async function createDynamicRouteGuard(
 
     await route.initAuthRoute();
 
-    if (to.name === routeName('not-found-page')) {
-      // 动态路由没有加载导致被not-found-page路由捕获，等待权限路由加载好了，回到之前的路由
+    if (to.name === routeName('not-found')) {
+      // 动态路由没有加载导致被not-found路由捕获，等待权限路由加载好了，回到之前的路由
       // 若路由是从根路由重定向过来的，重新回到根路由
-      const ROOT_ROUTE_NAME: AuthRoute.RouteKey = 'root';
+      const ROOT_ROUTE_NAME: AuthRoute.AllRouteKey = 'root';
       const path = to.redirectedFrom?.name === ROOT_ROUTE_NAME ? '/' : to.fullPath;
       next({ path, replace: true, query: to.query, hash: to.hash });
       return false;
     }
   }
 
-  // 权限路由已经加载，仍然未找到，重定向到not-found
-  if (to.name === routeName('not-found-page')) {
-    next({ name: routeName('not-found'), replace: true });
+  // 权限路由已经加载，仍然未找到，重定向到404
+  if (to.name === routeName('not-found')) {
+    next({ name: routeName('404'), replace: true });
     return false;
   }
 

src/router/guard/permission.ts

@@ -61,7 +61,7 @@ export async function createPermissionGuard(
       // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
       isLogin && needLogin && !hasPermission,
       () => {
-        next({ name: routeName('no-permission') });
+        next({ name: routeName('403') });
       }
     ]
   ];

src/router/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
-import { transformAuthRoutesToVueRoutes, transformRouteNameToRoutePath } from '@/utils';
+import { transformRouteNameToRoutePath } from '@/utils';
+import { transformAuthRouteToVueRoutes } from '@/utils/router/transform';
 import { constantRoutes } from './routes';
 import { scrollBehavior } from './helpers';
 import { createRouterGuard } from './guard';
@@ -9,7 +10,7 @@ const { VITE_HASH_ROUTE = 'N', VITE_BASE_URL } = import.meta.env;
 
 export const router = createRouter({
   history: VITE_HASH_ROUTE === 'Y' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
-  routes: transformAuthRoutesToVueRoutes(constantRoutes),
+  routes: transformAuthRouteToVueRoutes(constantRoutes),
   scrollBehavior
 });
 
@@ -21,9 +22,9 @@ export async function setupRouter(app: App) {
 }
 
 /** 路由名称 */
-export const routeName = (key: AuthRoute.RouteKey) => key;
+export const routeName = (key: AuthRoute.AllRouteKey) => key;
 /** 路由路径 */
-export const routePath = (key: Exclude<AuthRoute.RouteKey, 'not-found-page'>) => transformRouteNameToRoutePath(key);
+export const routePath = (key: Exclude<AuthRoute.AllRouteKey, 'not-found'>) => transformRouteNameToRoutePath(key);
 
 export * from './routes';
 export * from './modules';

src/router/modules/about.ts

@@ -1,4 +1,4 @@
-const about: AuthRoutes.Route = {
+const about: AuthRoute.Route = {
   name: 'about',
   path: '/about',
   component: 'self',

src/router/routes/index.ts

@@ -39,8 +39,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     }
   },
   {
-    name: 'no-permission',
-    path: '/no-permission',
+    name: '403',
+    path: '/403',
     component: 'self',
     meta: {
       title: '无权限',
@@ -48,8 +48,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     }
   },
   {
-    name: 'not-found',
-    path: '/not-found',
+    name: '404',
+    path: '/404',
     component: 'self',
     meta: {
       title: '未找到',
@@ -57,8 +57,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     }
   },
   {
-    name: 'service-error',
-    path: '/service-error',
+    name: '500',
+    path: '/500',
     component: 'self',
     meta: {
       title: '服务器错误',
@@ -67,7 +67,7 @@ export const constantRoutes: AuthRoute.Route[] = [
   },
   // 匹配无效路径的路由
   {
-    name: 'not-found-page',
+    name: 'not-found',
     path: '/:pathMatch(.*)*',
     component: 'blank',
     meta: {