本文详解如何在 vuetify 2.x 中为侧边菜单的 v-list-item 添加点击高亮效果，通过 active-class 属性结合路由状态管理，避免为每个菜单项单独声明响应式变量，实现简洁、可维护的激活态控制。
在构建基于 Vuetify 的单页应用（SPA）时，侧边导航菜单（如 v-list + v-list-group）常需根据当前路由或用户操作动态高亮对应项。若手动维护多个布尔变量（如 isMainWifiActive、isGuestWifiActive），不仅代码冗余，还极易因状态同步问题导致 UI 不一致。幸运的是，Vuetify 2.x 原生提供了更优雅的解决方案——利用 v-list-group 和 v-list-item 的 active-class 与 value 机制，配合统一的状态字段（如 openMenu），即可实现集中式激活控制。
✅ 推荐方案：active-class + value 双驱动
v-list-item 支持 value 属性作为其“标识值”，而 v-list-group（及其子项）会自动识别并为 value 匹配当前激活项的 v-model 或显式绑定的 value，从而应用 active-class 所指定的 CSS 类。
? 步骤一：统一维护激活项标识
在组件 data 中定义一个字符串型响应式字段，用于记录当前选中的菜单项名称：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
data() {
return {
openMenu: 'Main Wi-Fi', // 初始默认激活项
// 其他数据...
}
}? 步骤二：为每个 v-list-item 设置 value 并绑定 active-class
无需手动写 :class="{ active: openMenu === 'xxx' }"，直接利用 Vuetify 内置逻辑：
立即学习“前端免费学习笔记（深入）”；
<v-list-group sub-group :value="true">
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>General settings</v-list-item-title>
</v-list-item-content>
</template>
<!-- Main Wi-Fi -->
<v-list-item
v-if="isFX20OrRG21"
value="Main Wi-Fi"
active-class="menu-item--active"
@click="menu_change('Main Wi-Fi')"
>
<v-list-item-title>Main Wi-Fi</v-list-item-title>
</v-list-item>
<!-- Guest Wi-Fi -->
<v-list-item
v-if="isFX20OrRG21"
value="Guest Wi-Fi"
active-class="menu-item--active"
@click="menu_change('Guest Wi-Fi')"
>
<v-list-item-title>Guest Wi-Fi</v-list-item-title>
</v-list-item>
</v-list-group>? 关键点说明：value="Main Wi-Fi" 是该项的唯一逻辑标识；active-class="menu-item--active" 指定高亮时添加的 CSS 类（需自行定义样式）；Vuetify 会自动将 v-list-item 的 value 与父级 v-list-group 的 v-model（或显式 value）比对——但注意：v-list-group 本身不直接参与激活判断，真正起作用的是 v-list-item 的 value 与组件内 openMenu 的绑定关系。因此，你仍需在 @click 中更新 openMenu，但无需在模板中做条件 class 绑定。
? 步骤三：确保 openMenu 同步更新（在 menu_change 中）
methods: {
menu_change(menuName) {
this.openMenu = menuName;
// 可选：触发路由跳转或内容刷新
}
}? 自定义高亮样式（示例）
.menu-item--active {
background-color: #e3f2fd !important;
border-left: 4px solid #2196f3;
}
/* 若需覆盖 Vuetify 默认 hover/focus 样式 */
.menu-item--active .v-list-item__content {
color: #1976d2 !important;
}⚠️ 注意事项与最佳实践
- 仅适用于 Vuetify 2.x：active-class 在 Vuetify 3+ 中已被移除，改用 :class + modelValue 或 v-model 配合 v-list-item 的 value 属性实现类似逻辑（需适配 Composition API）。
- v-list-item 必须有 value 属性：否则 active-class 不生效；value 类型建议统一为字符串，便于比较。
-
避免重复 v-if 逻辑：可将 isFX20OrRG21 提取为计算属性，提升可读性与复用性：
computed: { isFX20OrRG21() { const model = this.routerDetail.router_model || this.routerDetail.group_model; return ( model === 'FX20' || model.startsWith('RG21') ); } } -
无障碍友好：高亮状态应同步更新 aria-current="page" 属性（Vuetify 2.x 不自动添加，需手动补充）：
<v-list-item :value="item.name" :aria-current="openMenu === item.name ? 'page' : undefined" active-class="menu-item--active" >
✅ 总结
通过 value + active-class 组合，你无需为每个菜单项创建独立响应式变量，仅用一个 openMenu 字符串即可驱动整个菜单的激活态渲染。这不仅大幅精简代码、降低维护成本，也更符合 Vue 响应式设计原则——单一数据源驱动视图状态。搭配语义化 CSS 类与合理计算属性封装，即可构建出专业、健壮且可扩展的导航高亮系统。
