利用 computed 实现导航菜单自动高亮，核心是通过 route.path 全等、startsWith 模糊匹配或 route.name 语义化匹配动态计算激活状态，并支持多级菜单的展开与高亮联动。
利用 computed 实现导航菜单自动高亮，核心是让菜单项的“激活状态”响应式地跟随当前路由变化。不需要手动监听路由或写一堆 if-else，Vue 的响应式系统配合 useRoute（组合式 API）或 this.$route（选项式 API）就能自然联动。
匹配当前路由路径
最常用也最直观的方式是比对菜单项的 path 与当前路由的 route.path 是否完全一致：
- 每个菜单项配置一个
path字段（如"/user"、"/order/list"） - 在组件中用
computed计算当前激活项的索引或布尔值 - 例如：`const activeIndex = computed(() => menuItems.findIndex(item => item.path === route.path))`
- 模板中用
:class="{ 'active': index === activeIndex }"控制样式
支持模糊匹配（如子路由高亮父菜单）
当菜单是“用户管理”（/user），而实际访问的是 /user/detail/123，仍希望父菜单高亮——这时不能只用全等，得用 startsWith 或正则：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- `const isActive = computed(() => route.path.startsWith(item.path))`
- 注意顺序：父级 path 要比子级短，且确保不会误匹配（比如
/user和/users冲突，可加结尾斜杠判断：route.path.startsWith(item.path + '/') || route.path === item.path） - 适合侧边栏一级菜单统管其所有子页面的场景
按路由 name 匹配（更语义化、更稳定）
比起 path 字符串，route.name 是唯一、不可变的标识符，推荐在中大型项目中优先使用：
- 菜单项配置
name: 'UserList'，路由定义中对应{ name: 'UserList', path: '/user' } -
`const activeName = computed(() => route.name)`，再用
v-if="item.name === activeName"或 class 绑定 - 好处：URL 改了（比如从
/user改成/members），只要 name 不变，高亮逻辑完全不受影响
处理嵌套路由与多级菜单展开
如果菜单有二级折叠项（如“订单”下含“列表”“统计”），需同时控制“高亮”和“展开”状态：
- 用
computed分别计算：isMenuActive（整个分组是否关联当前路由）、isItemActive（具体子项是否命中） - 例如：`const isOrderMenuOpen = computed(() => ['OrderList', 'OrderStats'].includes(route.name))`
- 配合
v-show="isOrderMenuOpen"控制子菜单显示，再用:class="{ active: route.name === item.name }"高亮当前子项
