feat: support the dynamic introduction and sorting of routes

apps/antd-view/src/router/guard.ts

@@ -10,11 +10,14 @@ import { useTitle } from '@vueuse/core';
 
 import { dynamicRoutes } from '@/router/routes';
 
+// 不需要权限的页面白名单
+const WHITE_ROUTE_NAMES = new Set<string>([]);
+
 /**
  * 通用守卫配置
  * @param router
  */
-function configCommonGuard(router: Router) {
+function setupCommonGuard(router: Router) {
   // 记录已经加载的页面
   const loadedPaths = new Set<string>();
 
@@ -44,28 +47,11 @@ function configCommonGuard(router: Router) {
   });
 }
 
-// 不需要权限的页面白名单
-const WHITE_ROUTE_NAMES = new Set<string>([]);
-
-/**
- * 跳转登录页面
- * @param to
- */
-function loginPageMeta(to: RouteLocationNormalized) {
-  return {
-    path: LOGIN_PATH,
-    // 如不需要，直接删除 query
-    query: { redirect: encodeURIComponent(to.fullPath) },
-    // 携带当前跳转的页面，登录后重新跳转该页面
-    replace: true,
-  };
-}
-
 /**
  * 权限访问守卫配置
  * @param router
  */
-function configAccessGuard(router: Router) {
+function setupAccessGuard(router: Router) {
   router.beforeEach(async (to, from) => {
     const accessStore = useAccessStore();
     const accessToken = accessStore.getAccessToken;
@@ -123,7 +109,19 @@ function configAccessGuard(router: Router) {
   });
 }
 
-export { configAccessGuard };
+/**
+ * 登录页面信息
+ * @param to
+ */
+function loginPageMeta(to: RouteLocationNormalized) {
+  return {
+    path: LOGIN_PATH,
+    // 如不需要，直接删除 query
+    query: { redirect: encodeURIComponent(to.fullPath) },
+    // 携带当前跳转的页面，登录后重新跳转该页面
+    replace: true,
+  };
+}
 
 /**
  * 项目守卫配置
@@ -131,9 +129,9 @@ export { configAccessGuard };
  */
 function createRouterGuard(router: Router) {
   /** 通用 */
-  configCommonGuard(router);
+  setupCommonGuard(router);
   /** 权限访问 */
-  configAccessGuard(router);
+  setupAccessGuard(router);
 }
 
 export { createRouterGuard };

apps/antd-view/src/router/index.ts

@@ -4,7 +4,7 @@ import { traverseTreeValues } from '@vben/utils';
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 import { createRouterGuard } from './guard';
-import { staticRoutes } from './routes';
+import { routes } from './routes';
 
 /**
  *  @zh_CN 创建vue-router实例
@@ -12,16 +12,14 @@ import { staticRoutes } from './routes';
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
   // 应该添加到路由的初始路由列表。
-  routes: staticRoutes,
-  scrollBehavior: (to, from, savedPosition) => {
-    if (to.path !== from.path) {
-      setTimeout(() => {
-        const app = document.querySelector('#app');
-        if (app) {
-          app.scrollTop = 0;
-        }
-      });
-    }
+  routes,
+  scrollBehavior: (_to, _from, savedPosition) => {
+    // if (to.path !== from.path) {
+    //   const app = document.querySelector('#app');
+    //   if (app) {
+    //     app.scrollTop = 0;
+    //   }
+    // }
     return savedPosition || { left: 0, top: 0 };
   },
 });
@@ -34,9 +32,9 @@ function resetRoutes() {
   const staticRouteNames = traverseTreeValues<
     RouteRecordRaw,
     RouteRecordName | undefined
-  >(staticRoutes, (route) => {
+  >(routes, (route) => {
     // 这些路由需要指定 name，防止在路由重置时，不能删除没有指定 name 的路由
-    if (!route.name) {
+    if (import.meta.env.DEV && !route.name) {
       console.warn(
         `The route with the path ${route.path} needs to specify the field name.`,
       );
@@ -45,8 +43,8 @@ function resetRoutes() {
   });
 
   const { getRoutes, hasRoute, removeRoute } = router;
-  const routes = getRoutes();
-  routes.forEach(({ name }) => {
+  const allRoutes = getRoutes();
+  allRoutes.forEach(({ name }) => {
     // 存在于路由表且非白名单才需要删除
     if (name && !staticRouteNames.includes(name) && hasRoute(name)) {
       removeRoute(name);

apps/antd-view/src/router/routes/dynamic/nested.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout } from '@/layouts';
 
-export const nestedRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -69,3 +69,5 @@ export const nestedRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/dynamic/outside.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout, IFrameView } from '@/layouts';
 
-export const outsideRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -35,3 +35,5 @@ export const outsideRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/dynamic/root.ts

@@ -2,11 +2,12 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout } from '@/layouts';
 
-const rootRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
       hideChildrenInMenu: true,
+      orderNo: -1,
       title: '首页',
     },
     name: 'Home',
@@ -26,4 +27,4 @@ const rootRoutes: RouteRecordRaw[] = [
   },
 ];
 
-export { rootRoutes };
+export default routes;

apps/antd-view/src/router/routes/dynamic/vben.ts

@@ -5,7 +5,7 @@ import { BasicLayout, IFrameView } from '@/layouts';
 import { VBEN_GITHUB_URL } from '@vben/constants';
 import { $t } from '@vben/locales/helper';
 
-export const vbenRoutes: RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
@@ -49,3 +49,5 @@ export const vbenRoutes: RouteRecordRaw[] = [
     ],
   },
 ];
+
+export default routes;

apps/antd-view/src/router/routes/index.ts

@@ -1,24 +1,28 @@
+import { mergeRouteModules } from '@vben-core/helpers';
 import type { RouteRecordRaw } from 'vue-router';
 
 import { essentialRoutes } from './_essential';
-import { nestedRoutes } from './modules/nested';
-import { outsideRoutes } from './modules/outside';
-import { rootRoutes } from './modules/root';
-import { vbenRoutes } from './modules/vben';
+
+const dynamicRouteFiles = import.meta.glob('./dynamic/**/*.ts', {
+  eager: true,
+});
+
+const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+const externalRouteFiles = import.meta.glob('./external/**/*.ts', {
+  eager: true,
+});
 
 /** 动态路由 */
-const dynamicRoutes: RouteRecordRaw[] = [
-  // 根路由
-  ...rootRoutes,
-  ...nestedRoutes,
-  ...outsideRoutes,
-  ...vbenRoutes,
-];
-
-/** 排除在主框架外的路由，这些路由没有菜单和顶部及其他框架内容 */
-const externalRoutes: RouteRecordRaw[] = [];
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
 /** 静态路由列表，访问这些页面可以不需要权限 */
-const staticRoutes: RouteRecordRaw[] = [...essentialRoutes];
+const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
 
-export { dynamicRoutes, externalRoutes, staticRoutes };
+/** 排除在主框架外的路由，这些路由没有菜单和顶部及其他框架内容 */
+const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+
+/** 路由列表，由基本路由+静态路由组成 */
+const routes: RouteRecordRaw[] = [...essentialRoutes, ...staticRoutes];
+
+export { dynamicRoutes, externalRoutes, routes };