XYGo Admin 菜单与路由：Vue3 动态路由 + GoFrame 权限菜单的完整实现方案

做后台管理系统，菜单和路由是最容易踩坑的地方。静态写死在代码里------权限一变就得改代码重新部署；动态生成吧------又怕性能差、白屏时间长。今天聊聊 XYGo Admin 是怎么用前后台双路由体系 + 动态菜单加载来解决这个问题的。

双路由体系：前台和后台彻底分家

XYGo Admin 把路由拆成了两套互不干扰的体系：

| 路由 | 前缀 | 模式 | 用途 |

|------|------|------|------|

为什么要这样分？前台部分（首页、文档站、会员中心）访问量大、变化少，静态路由就够了，首屏加载也快。后台部分每个角色的菜单都不一样------管理员能看到「系统设置」「用户管理」，普通运营可能只有「内容管理」「数据看板」------这部分必须动态加载。

前台路由在 `router/frontend/` 里静态定义，用独立的 `FrontendLayout` 布局：

```typescript

// router/frontend/index.ts

const frontendRoutes = [

{

path: '/',

component: FrontendLayout,

children: [

{

path: '',

component: () => import('@/views/frontend/index/index.vue')

{

path: 'docs',

component: () => import('@/views/frontend/docs/index.vue')

{

path: '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 官方文档。