路由

路由

路由结构

路由文件组织

admin/src/router/
├── index.ts          # 路由入口文件，包含路由实例创建、守卫配置等
└── routers.ts        # 路由定义文件，包含静态路由、路由工具函数等

核心路由类型

系统定义了以下核心路由类型：

静态路由

静态路由是系统预先定义的路由，不随用户权限变化而改变：

// 静态路由定义
export const STATIC_ROUTES: Array<RouteRecordRaw> = [
    {
        path: '/:pathMatch(.*)*',
        component: () => import('@/app/views/error/404.vue')
    }
]

// 免登录路由
export const NO_LOGIN_ROUTES: string[] = [
    '/404'
]

主要静态路由

动态路由

动态路由是根据用户权限动态生成的路由，从后端接口获取并转换为前端路由配置：

动态路由生成流程

1. 从后端获取菜单权限列表

2. 使用 formatRouters 函数将菜单数据转换为 Vue Router 配置

3. 通过 router.addRoute 动态添加到路由系统

动态路由生成函数

/**
 * 创建路由
 * @param route 路由数据
 * @param parentRoute 父路由
 */
const createRoute = function (route: Route, parentRoute: RouteRecordRaw | null = null): RouteRecordRaw {
    const record: RouteRecordRaw = {
        path: `/${ route.app_type }/${ route.router_path }`,
        name: route.menu_key,
        meta: {
            title: route.menu_name,
            short_title: route.menu_short_name,
            icon: route.icon,
            type: route.menu_type,
            show: route.is_show,
            app: route.app_type,
            view: route.view_path,
            addon: route.addon,
            attr: route.menu_attr,
            parent_route: parentRoute ? parentRoute.meta : parentRoute,
            sort: route.sort
        }
    }
    if (route.menu_type == 0) {
        record.component = parentRoute ? RouterView : () => Promise.resolve(Default)
    } else {
        record.component = route.addon ? 
            addonModules[`/src/addon/${ route.addon }/views/${ route.view_path }.vue`] : 
            modules[`/src/app/views/${ route.view_path }.vue`]
    }
    return record
}

插件路由

系统支持通过插件方式扩展路由，插件路由会自动加载并合并到主路由系统中：

// 加载插件中定义的router
const ADDON_ROUTE = []
const addonRoutes = import.meta.globEager('@/addon/**/router/index.ts')
for (const key in addonRoutes) {
    const addon: any = addonRoutes[key]
    addon.ROUTE && ADDON_ROUTE.push(...addon.ROUTE)
    addon.NO_LOGIN_ROUTES && NO_LOGIN_ROUTES.push(...addon.NO_LOGIN_ROUTES)
}