菜单与路由
这篇解决什么
侧栏从哪来、菜单 component 怎么对上 views 文件。读完能改一条动态路由,不要在 router/routes/modules 里为普通业务页手写 path。
本仓库 preferences.app.accessMode 是 backend。菜单树来自 /system/auth/get-permission-info 的 menus。工程入口见 前端工程结构。
示意图:后端菜单转成字符串 component,再按文件 glob 换成实际页面。
从哪改
| 名称 | 说明 | 仓库路径 |
|---|---|---|
| 权限接口 | 用户、角色、菜单、权限字 | ruoyi-office/yudao-module-system/.../AuthController.java |
| 登录后写入 | menus → accessMenus,已转换后不要再覆盖 | apps/web-antd/src/store/auth.ts |
| 生成路由 | generateAccessible + pageMap | src/router/access.ts |
| 守卫 | 无 token 去登录;首次生成动态路由 | src/router/guard.ts |
| 菜单转换 | path 拼接、Layout → BasicLayout | ruoyi-office-vben/packages/utils/.../generate-menus.ts |
| 页面匹配 | iot/device/device/index → views/iot/device/device/index.vue | generate-routes-backend.ts |
菜单 component 填相对 views/ 的路径,不要带 .vue。对不上会打 route component is invalid,并落到 /_core/fallback/not-found.vue。component 后面可以带 ?key=value,会进 meta.query。
顶级目录菜单会改成 BasicLayout。外链:普通 URL 当 link;带 _iframe 当 IFrameView。隐藏页(详情)visible=false 时用父 path 做 activePath。
router/routes/modules/*.ts 只放登录后也要存在、但菜单管不了的静态页,例如部分流程设计器、分析中心子看板。普通 CRUD 不要往这里加。
access.ts 还会给工作台补 affixTab、给分析中心补子路由。这些是特例,不要学着给业务模块再写一层补丁。
字段
| 名称 | 说明 | 仓库路径 |
|---|---|---|
component | 对 views 的路径 | system_menu |
path | 子级会拼到父 path 后面 | generate-menus.ts |
componentName | 路由 name;重复则加菜单 id | 同上 |
keepAlive | 是否缓存 | meta.keepAlive |
菜单路径错了不要改匹配算法
页面已是 apply/info、库里还是 apply/detail,改菜单或 SQL。不要在 pageMap / registerComponent 加别名。
先有文件再配菜单
import.meta.glob('../views/**/*.vue') 只扫得到已存在的 vue。只插菜单、没建文件,打开就是 404 页。
@RequestMapping("/system/auth")
public class AuthController {
@GetMapping("/get-permission-info")
public CommonResult<AuthPermissionInfoRespVO> getPermissionInfo() { }
}