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标记方案。