vue导航实现active

Vue 导航 Active 状态实现方法

使用 router-link 和 active-class

Vue Router 内置了导航激活状态的类名绑定功能，通过 router-link 组件的 active-class 属性或全局配置实现：

<router-link to="/home" active-class="active">Home</router-link>

通过路由配置全局设置：

const router = new VueRouter({
  linkActiveClass: 'active' // 全局生效
})

动态绑定 class 或 style

结合 $route 对象手动判断当前路径：

<template>
  <a :class="{ active: $route.path === '/home' }" href="/home">Home</a>
</template>

使用计算属性

对于复杂逻辑，推荐使用计算属性：

computed: {
  isActive() {
    return this.$route.path.startsWith('/products');
  }
}

嵌套路由匹配

需要匹配嵌套路由时，使用 linkExactActiveClass：

<router-link to="/nested" exact-active-class="exact-active">Nested</router-link>

第三方 UI 库集成

如使用 Element UI 的菜单组件：

<el-menu :default-active="$route.path" router>
  <el-menu-item index="/dashboard">Dashboard</el-menu-item>
</el-menu>

注意事项

• 路径匹配默认是包含匹配（如 /about 会激活 /about/team）
• 精确匹配需添加 exact 属性：<router-link to="/" exact>
• 激活样式通常需自行编写 CSS：

  .active {
    color: #42b983;
    font-weight: bold;
  }