vue实现跳转高亮
Vue实现路由跳转高亮
在Vue项目中实现导航菜单跳转高亮效果，通常结合vue-router的active-class特性。以下是几种常见实现方式：
使用router-link的active-class
Vue Router内置提供了路由匹配高亮功能，通过active-class属性指定激活状态的样式类名：
<router-link
to="/home"
active-class="active-link"
exact-active-class="exact-active-link"
>
首页
</router-link>.active-link {
color: #42b983;
font-weight: bold;
}
.exact-active-link {
border-bottom: 2px solid #42b983;
}exact-active-class会在路径完全匹配时生效，适用于嵌套路由场景。
动态class绑定
通过计算当前路由路径与菜单路径是否匹配来动态添加class：
<template>
<div
v-for="item in menuList"
:key="item.path"
:class="{ 'active': $route.path === item.path }"
@click="goTo(item.path)"
>
{{ item.title }}
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{ path: '/home', title: '首页' },
{ path: '/about', title: '关于' }
]
}
},
methods: {
goTo(path) {
this.$router.push(path)
}
}
}
</script>
<style>
.active {
background-color: #f0f9eb;
}
</style>使用vue-router的meta属性
通过路由配置的meta字段标记需要高亮的菜单项：
// router.js
{
path: '/dashboard',
component: Dashboard,
meta: { highlightMenu: '/admin' }
}在导航组件中通过监听路由变化实现高亮：
computed: {
activeMenu() {
const route = this.$route
return route.meta.highlightMenu || route.path
}
}嵌套路由高亮处理
对于嵌套路由场景，可使用$route.matched获取匹配的路由记录：
isActive(path) {
return this.$route.matched.some(item => item.path === path)
}第三方库实现
使用如vue-nav-tabs等专门处理导航高亮的库：
npm install vue-nav-tabs<vue-nav-tabs :routes="routes" />每种方案适用于不同场景，根据项目复杂度选择合适实现方式。简单项目推荐使用原生router-link方案，复杂路由系统建议采用动态class绑定或meta标记方案。
