NocoBase 路由管理器：统一管理系统桌面端与移动端路由和菜单

NocoBase 路由管理器统一管理系统桌面端与移动端路由和菜单【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase路由管理器Routes Manager是 NocoBase 中用于管理系统主页面路由与导航菜单的工具支持桌面端与移动端两套路由体系。路由与菜单双向同步在路由管理器中创建的路由会同步显示在菜单中也可配置为不在菜单中显示反过来在页面菜单处添加的菜单也会出现在路由管理器列表中。读完本文你可以掌握路由管理器的四种路由类型分组、页面、标签、链接、完整的添加与批量操作流程以及其背后的数据模型、权限迁移与源码实现位置从而独立完成系统导航结构的规划与维护。路由管理器是什么从文档定义看路由管理器的核心价值在于把“页面路由”与“导航菜单”两件事合并为一个管理入口支持桌面端和移动端两套独立的路由体系使用路由管理器创建的路由会同步显示在菜单中可配置为不显示在菜单中在页面菜单处添加的菜单也会同步显示在路由管理器列表中。也就是说菜单并不是一个独立于路由的第二套配置而是路由的一个“展示视图”。这一设计在源码中可以得到印证plugin-client 客户端入口 中通过pluginSettingsManager注册了routes路由、routes.desktop桌面端路由与routes.mobile移动端路由三个设置项分别绑定DesktopRoutesManager与MobileRoutesManager两个管理组件并声明了对应的 ACL 片段pm.routes、pm.routes.desktop、pm.routes.mobile即路由管理功能本身也纳入了权限体系服务端插件实现 中操作desktopRoutes仓库repository并通过localeManager.registerSource(desktop-routes, ...)将路由标题注册为可翻译源使菜单名称支持多语言。四种路由类型系统支持四种类型的路由覆盖了导航结构中的几乎所有场景类型说明分组group用于对路由进行分组管理可以包含子路由页面page系统内部页面标签tab用于在页面内部进行标签页切换的路由类型链接link内部或者外部链接可直接跳转到其配置的链接地址类型选择在创建路由的第一步完成。其中page是与具体页面实体直接关联的类型从服务端历史数据迁移逻辑2024122912211-transform-menu-schema-to-routes.ts中可以看到只有type page的路由才会进一步读取其关联的 UI Schema 来判断是否开启 Tab 页这与“标签页是页面内部的切换机制”这一定位一致。添加路由点击右上角的 “Add new” 按钮可以创建新的路由完整字段如下选择路由类型Type即上文四种类型之一填写路由标题Title该标题同时作为菜单显示名称并会被注册进多语言翻译源选择路由图标Icon用于菜单中路由条目的图标展示设置是否在菜单中显示Show in menu关闭后路由仍然存在但不出现在导航菜单中可用于隐藏管理页等场景设置是否开启 Tab 页Enable page tabs对应源码中enablePageTabs配置项可在 客户端中英文文案 等 locale 文件中检索到该键开启后页面内部以标签页形式管理多个子页签对于页面类型系统会自动生成唯一的路由路径Path无需手工编写避免路径冲突。路由条目操作与批量操作每个路由条目支持以下行内操作Add child添加子路由用于构建分组/嵌套层级Edit编辑路由配置类型、标题、图标、菜单显示等;View查看路由页面Delete删除路由。顶部工具栏提供批量操作功能Refresh刷新路由列表Delete删除选中的路由Hide in menu在菜单中隐藏选中的路由Show in menu在菜单中显示选中的路由。此外顶部 “Filter” 功能可根据需要对路由列表进行筛选便于在路由数量较多时快速定位目标条目。:::info 路由配置的修改将直接影响系统的导航菜单结构请谨慎操作确保路由配置的正确性。 :::菜单与路由的同步机制路由管理器的设计要点是“菜单是路由的投影”这在数据模型层面体现为桌面端与移动端各自拥有独立的路由集合desktopRoutes、mobileRoutes由 plugin-client 服务端代码 统一读写“是否在菜单中显示” 是路由条目上的属性批量 “Hide in menu / Show in menu” 操作本质上就是批量修改该属性页面菜单处新增的菜单条目会以路由记录的形式落库因此能在路由管理器列表中同步看到。历史数据迁移从 uiSchemas 菜单到 routes值得一提的是路由管理器并非一开始就以独立路由集合存在。从 迁移脚本 2024122912211-transform-menu-schema-to-routes.ts 可以还原这一演进过程该迁移在appVersion 1.6.0的版本升级时执行将旧版基于uiSchemas菜单 schemauid 为nocobase-admin-menu的菜单数据经schemaToRoutes转换为新版desktopRoutes记录将旧版角色权限中基于menuUiSchemas的菜单授权转换为新版的roles.desktopRoutes授权关系计算需要移除/补充的路由 ID 后批量更新对移动端路由逐条读取type page的路由所关联的 schema将旧的x-component-props.displayTabs映射为新的enablePageTabs配置。这段迁移逻辑说明了两件事其一路由与菜单权限是绑定在一起的——角色可以授权访问哪些路由其二enablePageTabs正是旧版displayTabs配置的新形态印证了前述 “Enable page tabs” 字段的历史来源。相关的数据模型与转换逻辑也有对应的测试用例覆盖例如 schemaToRoutes.test.ts 与 desktopRoutes.test.ts可以据此进一步验证路由集合的行为与权限修正逻辑如 202502071837-fix-permissions.test.ts。小结路由管理器是 NocoBase 中路由与菜单的统一管理入口支持桌面端/移动端并保证菜单与路由列表双向同步四种路由类型group/page/tab/link “Show in menu” 属性覆盖了分组、内部页面、页内标签、内外部链接的全部导航诉求从源码结构看路由管理功能由nocobase/plugin-client插件承载客户端DesktopRoutesManager/MobileRoutesManager组件负责界面服务端desktopRoutes/mobileRoutes仓库负责数据ACL 片段与多语言注册保证了权限与国际化支持修改路由会直接影响导航菜单结构建议在变更前规划好层级与显示策略并善用 Filter 与批量操作维护大型路由树。更多细节可参考中文文档 路由管理器。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考