利用 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 }" 高亮当前子项