chaihongjun.me

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

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

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

所以整体思路：

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

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

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