状态驱动的导航菜单核心是通过全局状态（如用户角色、路由、权限）动态决定菜单结构与高亮，而非硬编码；菜单数据从 Pinia/Redux 等 store 响应式读取并实时更新，自动匹配当前路由实现精准高亮，权限变更时主动重载，侧边栏组件仅负责渲染与跳转，保持无状态。
状态驱动的导航菜单，核心是让菜单结构和高亮逻辑由应用的全局状态（如用户角色、当前路由、权限配置）实时决定，而不是写死在模板里。关键不在于“怎么画菜单”，而在于“谁告诉菜单该显示什么、选中哪个”。
用状态定义菜单数据结构
把菜单项抽象成纯对象数组，每个对象包含路径、名称、图标、权限标识、是否可见等字段。这些数据从全局状态（比如 Pinia store 或 Redux slice）中读取，而非硬编码在组件内。
- 例如：store 中定义 menuItems 数组，根据 userRole 字段动态过滤出该角色可见的菜单项
- 支持嵌套（如子菜单），但结构保持扁平或树形均可，重点是可被状态响应式更新
- 避免在组件渲染逻辑里写
v-if="role === 'admin'"，应提前在 store 中完成筛选
绑定当前激活状态到路由
菜单高亮不是靠点击后手动设 active，而是自动匹配当前路由路径。使用 Vue Router 的 useRoute() 或 React Router 的 useLocation() 获取当前 route 对象，再与菜单项的 path 或 name 比对。
- 推荐用 route.matched（Vue）或 matchRoutes()（React）做深度匹配，支持子路由高亮父级菜单
- 菜单项可带 meta.activePath 字段，用于自定义高亮逻辑（如 /user/list → 高亮 /user）
- 不要用字符串
includes()粗暴匹配，易误判（如 /user 和 /user-detail）
响应式更新 + 权限变更重载
用户登录、登出、切换角色时，菜单必须立刻刷新。不能只依赖初始化时的一次获取。
- 在 store 中监听 authState 变化，触发 fetchMenuItems() 重新计算并更新菜单列表
- 若菜单数据来自后端 API，需在权限变更后主动调用接口，避免缓存旧数据
- Vue 中可配合 watch 监听 store 属性；React 中可用 useEffect 依赖 auth token 或 role
侧边栏组件保持“无状态”
侧边栏组件只负责渲染传入的菜单数据，并响应点击跳转。它不保管状态、不判断权限、不管理路由匹配——这些都交给 store 和路由系统。
- 接收 menuItems 和 activeKey 作为 props（或通过 store 自动订阅）
- 点击菜单项时只调用 router.push(item.path)，不修改任何状态变量
- 支持折叠/展开状态可单独抽离为局部 state，不影响菜单内容逻辑
不复杂但容易忽略：菜单状态要和路由、权限、用户信息真正联动起来，而不是多个地方各自维护一份“当前菜单”。统一收口到状态管理，才能做到一处变更、处处响应。
