核心是让侧边栏完全由路由配置驱动，通过meta字段统一承载标题、图标、隐藏标识等菜单语义，组件仅递归渲染过滤后的路由树，高亮由路由系统自动匹配，权限变更时动态重载菜单数据。

实现基于路由状态自动生成的侧边栏，核心是让 UI 完全由路由配置驱动，而非手动维护两套菜单数据。关键不在“画菜单”，而在“让菜单信任路由、响应路由、跟随路由变化”。

用 meta 字段统一承载菜单语义

在 Vue Router 或 React Router 的路由定义中，把所有菜单相关字段（标题、图标、是否显示、权限标识）都放进 meta 对象里，不污染导航逻辑：

• 设置 meta.title 作为菜单文字，meta.icon 指定图标名或 SVG 路径
• 用 meta.hidden = true 标记纯重定向路由或中间页，侧边栏遍历时直接跳过
• 需要权限控制时，加 meta.roles: ['admin', 'editor']，后续由权限逻辑统一过滤
• 避免在路由对象里塞 component 和 redirect 同时存在——这会让菜单渲染和实际跳转行为不一致

侧边栏组件只做一件事：递归渲染路由树

SideBar.vue（或 Sidebar.tsx）不读取 store、不调接口、不判断角色，只接收一个干净的路由数组（如 filteredRoutes），然后按结构递归渲染：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 遍历 router.options.routes（前端静态路由）或从 store 订阅的 menuRoutes（后端动态返回）
• 对每个路由项，检查 meta.hidden !== true 才渲染；有 children 且非空，则递归调用子菜单组件
• 点击时只执行 router.push(item.path)，不设 active、不改状态——高亮由路由匹配自动完成
• 支持折叠/展开属于局部 UI 状态，用 ref 或 useState 管理，与菜单数据解耦

高亮逻辑交给路由系统，不是点击事件

菜单选中态不是靠点击后手动标记，而是实时比对当前 URL 与菜单项路径关系：

• Vue 中用 useRoute() 获取 route.matched 数组，检查当前路由是否“属于”某菜单项的子路径
• React 中用 useMatch({ path: item.path, end: false }) 实现前缀匹配（如 /user 匹配 /user/list）
• 避免用 location.pathname.includes(item.path)，否则 /user 会误匹配 /user-detail
• 如需自定义高亮规则（比如 /user/list → 高亮 /user），可在 meta 中加 meta.activePath: '/user'

权限变更时重载菜单，不是重载页面

用户登录、切换角色、token 刷新后，菜单必须立刻响应，但不需要整页刷新：

• 在 Pinia store 或 Redux slice 中监听 auth.role 或 auth.token 变化
• 触发重新过滤路由：遍历原始路由表，根据新角色 + meta.roles 做白名单筛选
• 若菜单来自后端 API，此时应主动发起请求获取新菜单结构，再更新 store 中的 menuRoutes
• 侧边栏组件通过 watch（Vue）或 useEffect（React）订阅该状态，自动 rerender

不复杂但容易忽略：菜单不是独立模块，它是路由配置的一层可视化投影。只要路由定义清晰、meta 使用规范、组件保持无状态，生成过程就自然、可预测、易维护。