vue如何实现菜单高亮

实现菜单高亮的方法

动态绑定class

通过v-bind:class或简写:class动态绑定高亮样式，结合当前路由或状态判断是否激活。例如：

<template>
  <div>
    <router-link 
      :to="/home" 
      :class="{ 'active': $route.path === '/home' }"
    >首页</router-link>
  </div>
</template>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用vue-router的exact属性

对于嵌套路由或复杂路径匹配，exact可精确匹配路由路径：

<router-link to="/about" exact-active-class="active">关于</router-link>

配置全局默认高亮类名：

const router = new VueRouter({
  linkExactActiveClass: 'active'
})

监听路由变化

在非<router-link>的自定义菜单中，通过watch监听路由变化：

export default {
  data() {
    return {
      activePath: ''
    }
  },
  watch: {
    '$route.path'(newVal) {
      this.activePath = newVal;
    }
  }
}

模板中通过activePath判断：

<div :class="{ 'active': activePath === '/contact' }">联系我们</div>

使用计算属性

对于多级菜单或复杂逻辑，推荐使用计算属性动态返回高亮状态：

computed: {
  isHomeActive() {
    return this.$route.path === '/home' || this.$route.matched.some(route => route.path === '/home');
  }
}

第三方库辅助

使用vue-router-active-path等库简化高亮逻辑：

import { isActive } from 'vue-router-active-path';
export default {
  methods: {
    checkActive(path) {
      return isActive(this.$route, path);
    }
  }
}

注意事项

• 嵌套路由需使用$route.matched而非直接比较path
• 动态路由参数需使用params或query进行匹配
• 移动端需考虑触摸反馈与高亮状态的视觉区分