---
title: Vue2页面菜单切换高亮应用
description: 由于Vue单页项目的特征，菜单高亮显示不同于Jquery的操作，需要根据路由的变化来判断设置高亮。
author: chaihongjun
category: frontend
published: 2024-12-11
url: https://chaihongjun.me/frontend/36.html
---

# Vue2页面菜单切换高亮应用

Vue项目中实现菜单切换之后的高亮与传统的jquery操作有很大的区别，由于涉及到Vue路由和异步数据获取等情况，所以需要特别注意。通过一个例子来分析一下：

MDBLOCK0
整个代码主要功能是动态生成导航栏中的分类链接，并根据当前路由路径高亮显示当前激活的分类。监听路由变化并动态更新导航链接的激活状态，实现了一个响应式的导航栏。用户可以通过点击不同的链接来导航到不同的页面，并且当前页面的链接会被突出显示。

使用 :class 动态绑定 active 类，通过 isActive 方法判断当前路径是否与导航项的路径匹配。监听路由变化，更新 activeRoute，确保导航项的高亮状态始终与当前路径一致。在组件挂载时，初始化 activeRoute 为当前路由的路径。

所以整体思路：

-
组件初始化的时候，根据当前路由(this.$route.path)先配置activeRoute，作为默认路由

-
watch监听路由对象$route，当路由变化的时候更新activeRoute

-
给菜单的class动态绑定isActive方法，这个方法判断当前路由和导航是否一致

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/36.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。