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进行匹配 - 移动端需考虑触摸反馈与高亮状态的视觉区分
