Vue项目中实现菜单切换之后的高亮与传统的jquery操作有很大的区别，由于涉及到Vue路由和异步数据获取等情况，所以需要特别注意。通过一个例子来分析一下：
<template>
<li class="navto-front" v-for="name in catesNames" :key="name" :class="{ active: isActive('/' + name) }">
<a :href="'/' + name">{{ name }}</a>
</li>
</template>
<script>
import { getCategories } from "../api/index";
export default {
data() {
return {
catesNames: [],
activeRoute: "/", // 默认激活的路由
};
},
methods: {
getCates() {
getCategories().then((res) => {
this.catesNames = res.map((item) => item.name);
});
},
isActive(routePath) {
return this.activeRoute === routePath; // 比较当前路径和传入的路径是否相等，用于判断当前路由是否激活
},
},
watch: {
$route(to) {
this.activeRoute = to.path; // 监听路由变化并更新 激活的路由
},
},
mounted() {
this.getCates(); //API 获取菜单
this.activeRoute = this.$route.path; // 初始化 activeRoute 为当前路径
}
}
</script>整个代码主要功能是动态生成导航栏中的分类链接，并根据当前路由路径高亮显示当前激活的分类。监听路由变化并动态更新导航链接的激活状态，实现了一个响应式的导航栏。用户可以通过点击不同的链接来导航到不同的页面，并且当前页面的链接会被突出显示。
使用 :class 动态绑定 active 类，通过 isActive 方法判断当前路径是否与导航项的路径匹配。监听路由变化，更新 activeRoute，确保导航项的高亮状态始终与当前路径一致。在组件挂载时，初始化 activeRoute 为当前路由的路径。
所以整体思路：
组件初始化的时候，根据当前路由(this.$route.path)先配置activeRoute，作为默认路由
watch监听路由对象$route，当路由变化的时候更新activeRoute
给菜单的class动态绑定isActive方法，这个方法判断当前路由和导航是否一致
