本文详解如何在 vuetify 2.x 中为侧边菜单的 `v-list-item` 实现点击态高亮，通过 `active-class` 属性与路由/状态联动，避免为每个菜单项单独声明布尔变量，提升代码可维护性与扩展性。
在构建基于 Vuetify 的单页应用（SPA）时，侧边导航菜单（如 v-list + v-list-group）常需响应式高亮当前选中项。若采用手动维护多个 isXXXActive 布尔状态（如 isMainWifiActive, isGuestWifiActive），不仅冗余繁琐，更违背响应式开发原则——理想方案应复用单一状态源，并由组件自动判断激活关系。
Vuetify 2.x 原生提供了优雅解法：v-list-group 支持 active-class prop，而 v-list-item 支持 value 和 to（或配合 @click 手动更新）协同工作，实现自动激活样式绑定。
✅ 推荐实践：使用 value + active-class + 单一状态管理
核心思路是：
- 用一个响应式数据（如 selectedMenuItem）统一记录当前激活项的唯一标识（字符串或 ID）；
- 每个 v-list-item 设置 :value="itemKey"（如 'Main Wi-Fi'）；
- v-list-group 设置 active-class="list-item--active"，并确保其 value 绑定到 selectedMenuItem；
- 点击时调用 menu_change(key) 更新 selectedMenuItem，Vuetify 自动匹配并添加高亮类。
示例代码（精简可复用结构）
active-class="list-item--active" > General settings @click="menu_change('Main Wi-Fi')" > Main Wi-Fi Guest Wi-Fi
⚠️ 注意事项与最佳实践
- value 必须唯一且稳定：建议使用语义化字符串（如 'Main Wi-Fi'），避免动态拼接或计算属性返回不稳定值，否则激活匹配会失效。
- v-list-group 是关键容器：active-class 仅在 v-list-group 上生效，且依赖其 value 与子 v-list-item 的 value 匹配；独立 v-list-item 不支持该机制。
- 避免 :class 手动绑定冲突：若同时使用 :class="{active: xxx}" 和 active-class，可能造成样式覆盖或重复渲染，推荐统一使用 active-class 方案。
- 配合 Vue Router 更进一步：若菜单与路由深度耦合，可将 value 设为 route.name 或 route.path，并通过 watch: { $route } 自动同步 selectedMenuItem，实现路由驱动高亮。
✅ 总结
无需为每个菜单项创建独立状态变量，也不必手动维护繁杂的条件类绑定。利用 Vuetify 2.x 内置的 v-list-group 的 active-class 与 value 双向绑定机制，仅需一个 selectedMenuItem 数据字段，即可实现清晰、可扩展、低耦合的菜单高亮逻辑。这既是框架能力的合理运用，也是 Vue 响应式设计哲学的典型体现。
立即学习“前端免费学习笔记（深入）”；
