多层架构

vue-vben-admin(ant-design-vue3-ts)

这是一个足够可靠的路由架构，分别对不同功能的层级进行了明确划分，

• guard：守卫层，一些常用的路由校验
• helper：与路由相关的功能函数
• menus：通过解析路由，生成侧边栏可用的菜单
• routes: 路由层
• routes/modules: 子路由

DIR:router                      
   |-- guard/                   # 守卫层，一些常用的路由校验
   |   |-- stateGuard.ts        #
   |   |-- permissionGuard.ts   #
   |   |-- paramMenuGuard.ts    #
   |   `-- index.ts             #
   |-- helper/                  # 与路由相关的功能函数
   |   |-- routeHelper.ts       #
   |   `-- menuHelper.ts        #
   |-- menus/                   # 通过解析路由，生成侧边栏可用的菜单
   |   `-- index.ts             #
   |-- routes/                  # 路由层，存放一些基础路由，全局路由
   |   |-- modules/             # 自路由层，按功能或者页面将路由分类存放
   |   |   |-- demo/            #
   |   |   |   `-- *.ts         #
   |   |   |-- dashboard.ts     #
   |   |   `-- about.ts         #
   |   |-- mainOut.ts           #
   |   |-- index.ts             #
   |   `-- basic.ts             #
   |-- types.ts                 #
   |-- index.ts                 #
   `-- constant.ts              # 常量

// index.ts
import type { App } from 'vue';
import type { RouteRecordRaw } from 'vue-router';

import { createRouter, createWebHashHistory } from 'vue-router';
import { basicRoutes } from './routes';

// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({
  // 创建一个 hash 历史记录。
  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
  // 应该添加到路由的初始路由列表。
  routes: basicRoutes as unknown as RouteRecordRaw[],
  // 是否应该禁止尾部斜杠。默认为假
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

// 配置路由器
export function setupRouter(app: App<Element>) {
  app.use(router);
}

// routes
import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';

// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
const modules = import.meta.globEager('./modules/**/*.ts');
const routeModuleList: AppRouteModule[] = [];

// 加入到路由集合中
Object.keys(modules).forEach((key) => {
  const mod = modules[key].default || {};
  const modList = Array.isArray(mod) ? [...mod] : [mod];
  routeModuleList.push(...modList);
});

export const basicRoutes = [
    ...routeModuleList,
    ...otherRouterList
]