路由

路由结构

路由文件组织

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

核心路由类型

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

路由类型	路径前缀	应用类型	说明
平台端路由	/admin	admin	系统管理后台路由
站点端路由	/site	site	站点管理后台路由
HOME端路由	/home	home	站点管理主路由
静态路由	/404	通用	错误页面等静态路由
插件路由	/{app_type}/	通用	插件扩展路由

静态路由

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

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

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

主要静态路由

路由路径	组件位置	说明
/404	@/app/views/error/404.vue	页面不存在错误页面
/admin/login	@/app/views/login/index.vue	平台端登录页面
/site/login	@/app/views/login/index.vue	站点端登录页面
/home/index	@/app/views/home/index.vue	站点管理主页
/site/wxoplatform/callback	@/app/views/index/wxoplatform_callback.vue	微信公众号平台授权回调页面

动态路由

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

动态路由生成流程

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)
}