XYGo Admin 菜单与路由Vue3 动态路由 GoFrame 权限菜单的完整实现方案做后台管理系统菜单和路由是最容易踩坑的地方。静态写死在代码里——权限一变就得改代码重新部署动态生成吧——又怕性能差、白屏时间长。今天聊聊 XYGo Admin 是怎么用前后台双路由体系动态菜单加载来解决这个问题的。双路由体系前台和后台彻底分家XYGo Admin 把路由拆成了两套互不干扰的体系| 路由 | 前缀 | 模式 | 用途 ||------|------|------|------|| 前台门户 | / | 静态注册 | 首页、文档、社区、会员中心 || 后台管理 | /admin | 动态加载 | 根据角色权限动态注册 |为什么要这样分前台部分首页、文档站、会员中心访问量大、变化少静态路由就够了首屏加载也快。后台部分每个角色的菜单都不一样——管理员能看到「系统设置」「用户管理」普通运营可能只有「内容管理」「数据看板」——这部分必须动态加载。前台路由在 router/frontend/ 里静态定义用独立的 FrontendLayout 布局typescript// router/frontend/index.tsconst 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前置守卫1. 白名单页面直接放行登录页、注册页、前台页面2. 没 Token → 跳到登录页3. 有 Token 但动态路由还没加载 → 调接口拉菜单、注册路由4. 权限校验——没有对应菜单权限的直接拦截afterEach后置守卫- 更新页面标题- 关闭顶部的加载进度条总结菜单与路由看起来简单实际做起来要考虑的东西不少权限粒度、动态注册的性能、组件懒加载、白名单放行、无权限页面的处理……XYGo Admin 这套方案最值得参考的地方是分层设计——前台静态、后台动态六个工具类各管一摊改一处不影响全局。如果你的后台系统还在把路由写死在代码里可以考虑参考这套方案做一次重构——前期多想的架构问题后面全是省下来的维护时间。更多技术细节可以查阅 XYGo Admin 官方文档。
