Skip to content

菜单与路由 ​

这篇解决什么 ​

侧栏从哪来、菜单 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 + pageMapsrc/router/access.ts
守卫无 token 去登录;首次生成动态路由src/router/guard.ts
菜单转换path 拼接、Layout → BasicLayoutruoyi-office-vben/packages/utils/.../generate-menus.ts
页面匹配iot/device/device/index → views/iot/device/device/index.vuegenerate-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 页。

java
@RequestMapping("/system/auth")
public class AuthController {
    @GetMapping("/get-permission-info")
    public CommonResult<AuthPermissionInfoRespVO> getPermissionInfo() { }
}

相关篇 ​

联系我们

获取报价、演示和二开方案

微信咨询二维码

微信咨询

17156169080

添加时备注「RuoYi Office」

在线体验商业版