vue如何实现菜单高亮

Vue实现菜单高亮的方法

动态绑定class或style
通过v-bind:class或v-bind:style动态绑定高亮样式。根据当前路由或状态判断是否激活菜单项，添加高亮类名或样式。

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

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

使用Vue Router的exact-active-class
Vue Router提供exact-active-class属性，自动为匹配当前路由的导航项添加高亮类名，无需手动判断。

<router-link 
  to="/home" 
  exact-active-class="active">
  首页
</router-link>

通过计算属性管理高亮状态
对于复杂逻辑，可使用计算属性返回高亮类名或样式对象，集中管理高亮条件。

<template>
  <div :class="menuClass">菜单项</div>
</template>

<script>
export default {
  computed: {
    menuClass() {
      return {
        active: this.$route.path === '/home',
        'has-notification': this.hasNotification
      };
    }
  }
};
</script>

嵌套菜单的高亮处理
对于嵌套菜单，可通过递归组件或遍历路由表实现子菜单高亮，结合$route.matched判断路由层级匹配。

// 示例：检查路由是否匹配
isActive(routePath) {
  return this.$route.matched.some(route => route.path === routePath);
}

第三方库辅助
使用vue-router-active-path等库简化高亮逻辑，适用于动态路由或复杂匹配场景。

import { isActivePath } from 'vue-router-active-path';

// 在模板或方法中调用
isActivePath('/dynamic-route');