XYGo Admin 菜单与路由：Vue3 动态路由 + GoFrame 权限菜单的完整实现方案
做后台管理系统，菜单和路由是最容易踩坑的地方。静态写死在代码里------权限一变就得改代码重新部署；动态生成吧------又怕性能差、白屏时间长。今天聊聊 XYGo Admin 是怎么用前后台双路由体系 + 动态菜单加载来解决这个问题的。
双路由体系：前台和后台彻底分家
XYGo Admin 把路由拆成了两套互不干扰的体系：
| 路由 | 前缀 | 模式 | 用途 |
|------|------|------|------|
| 前台门户 | `/` | 静态注册 | 首页、文档、社区、会员中心 |
| 后台管理 | `/admin` | 动态加载 | 根据角色权限动态注册 |
为什么要这样分？前台部分（首页、文档站、会员中心）访问量大、变化少，静态路由就够了，首屏加载也快。后台部分每个角色的菜单都不一样------管理员能看到「系统设置」「用户管理」，普通运营可能只有「内容管理」「数据看板」------这部分必须动态加载。
前台路由在 `router/frontend/` 里静态定义，用独立的 `FrontendLayout` 布局：
```typescript
// router/frontend/index.ts
const frontendRoutes = [
{
path: '/',
component: FrontendLayout,
children: [
{
path: '',
name: 'Home',
component: () => import('@/views/frontend/index/index.vue')
},
{
path: 'docs',
name: 'Docs',
component: () => import('@/views/frontend/docs/index.vue')
},
{
path: 'community',
name: 'Community',
component: () => import('@/views/frontend/community/index.vue')
}
]
}
]
```
后台动态路由：从数据库到 Vue Router
后台路由的核心逻辑：用户登录后访问 `/admin/*` → 路由守卫拦截 → 从后端拉取菜单数据 → 转换成 Vue Router 路由 → 动态注册。
整个流程是这样的：
```
用户访问 /admin/dashboard
→ beforeEach 路由守卫
→ 检查 Token（没登就踢去登录页）
→ 检查动态路由注册状态
→ 没注册：调后端接口拿菜单列表
→ RouteTransformer 转成 Vue Router 路由
→ RouteRegistry 动态注册
→ 跳转目标页面
```
后端返回的菜单数据长这样：
```json
{
"id": 1,
"pid": 0,
"title": "系统管理",
"icon": "ri:settings-3-line",
"path": "/system",
"component": "LAYOUT",
"type": 1,
"children": [
{
"id": 2,
"pid": 1,
"title": "用户管理",
"path": "user",
"component": "/system/user/index",
"authList": ["add", "edit", "delete"]
}
]
}
```
每个菜单节点都带了 `authList`------这就是按钮级权限的基础。用户管理页面上，「新增」「编辑」「删除」三个按钮能不能点，全看 `authList` 里有没有对应的权限标识。
六大核心工具各司其职
XYGo Admin 把路由相关的逻辑拆成了六个工具类，职责很清晰：
| 工具类 | 职责 |
|--------|------|
| `RouteRegistry` | 动态路由注册与卸载 |
| `ComponentLoader` | 组件懒加载 |
| `RouteValidator` | 路由合法性验证 |
| `RouteTransformer` | 菜单数据 → Vue 路由转换 |
| `MenuProcessor` | 菜单数据处理 |
| `RoutePermissionValidator` | 路由权限校验 |
| `IframeRouteManager` | Iframe 页面路由管理 |
这种设计的好处是：改菜单数据结构只需要动 `RouteTransformer`，改权限校验逻辑只需要动 `RoutePermissionValidator`，互不影响。
路由守卫做了什么
beforeEach（前置守卫）：
-
白名单页面直接放行（登录页、注册页、前台页面）
-
没 Token → 跳到登录页
-
有 Token 但动态路由还没加载 → 调接口拉菜单、注册路由
-
权限校验------没有对应菜单权限的直接拦截
afterEach（后置守卫）：
-
更新页面标题
-
关闭顶部的加载进度条
总结
菜单与路由看起来简单，实际做起来要考虑的东西不少：权限粒度、动态注册的性能、组件懒加载、白名单放行、无权限页面的处理......XYGo Admin 这套方案最值得参考的地方是分层设计------前台静态、后台动态，六个工具类各管一摊，改一处不影响全局。
如果你的后台系统还在把路由写死在代码里，可以考虑参考这套方案做一次重构------前期多想的架构问题，后面全是省下来的维护时间。
更多技术细节可以查阅 XYGo Admin 官方文档。