`active-class`：Vue Router 链接组件的激活状态管理

active-class：Vue Router 链接组件的激活状态管理

在 Vue.js 单页应用中，active-class 是一个至关重要但经常被误解的属性。今天我们来彻底搞清楚它是什么、怎么用，以及最佳实践！

一、基础认知：active-class 属于谁？

一句话回答 ：active-class 是 Vue Router 的 <router-link> 组件的属性。

<!-- 这是正确的使用方式 -->
<router-link 
  to="/home" 
  active-class="active-link"
>
  首页
</router-link>

错误认知澄清

<!-- 错误！这不是原生HTML属性 -->
<a href="/home" active-class="active">首页</a> ❌

<!-- 错误！这不是普通Vue组件的属性 -->
<button active-class="active">按钮</button> ❌

二、<router-link> 组件深度解析

2.1 基本使用

<template>
  <div id="app">
    <!-- 最简单的用法 -->
    <router-link to="/home">首页</router-link>
    
    <!-- 使用 active-class -->
    <router-link 
      to="/about" 
      active-class="text-red-500 font-bold"
    >
      关于我们
    </router-link>
    
    <!-- 完整配置示例 -->
    <router-link
      to="/products"
      active-class="active-nav-item"
      exact-active-class="exact-active-nav-item"
      class="nav-link"
      :class="{ 'custom-class': isCustom }"
    >
      产品中心
    </router-link>
  </div>
</template>

2.2 <router-link> 的工作机制

// router-link 的内部实现简化
const RouterLink = {
  name: 'RouterLink',
  props: {
    to: { type: [String, Object], required: true },
    activeClass: String,      // active-class 的 prop 名
    exactActiveClass: String, // exact-active-class 的 prop 名
    // ... 其他 props
  },
  
  render() {
    // 1. 解析路由匹配状态
    const isActive = this.$route.path === this.resolvedTo.path
    const isExactActive = this.$route.path === this.resolvedTo.path
    
    // 2. 构建 class 对象
    const classObj = {
      [this.activeClass]: isActive,
      [this.exactActiveClass]: isExactActive,
      // ... 其他 class 逻辑
    }
    
    // 3. 渲染为 <a> 标签
    return h('a', {
      href: this.href,
      class: classObj,
      onClick: this.navigate
    }, this.$slots.default())
  }
}

三、active-class vs exact-active-class

3.1 关键区别

<template>
  <nav>
    <!-- 情况1：普通匹配（active-class） -->
    <router-link 
      to="/dashboard" 
      active-class="bg-blue-100"
    >
      仪表盘
    </router-link>
    <!-- 
      当访问 /dashboard 时：✅ 激活
      当访问 /dashboard/profile 时：✅ 也激活！
      因为 /dashboard/profile 包含 /dashboard
    -->
    
    <!-- 情况2：精确匹配（exact-active-class） -->
    <router-link
      to="/dashboard"
      exact-active-class="bg-blue-500 text-white"
    >
      仪表盘（精确）
    </router-link>
    <!--
      当访问 /dashboard 时：✅ 激活
      当访问 /dashboard/profile 时：❌ 不激活！
      只有路径完全匹配时才激活
    -->
    
    <!-- 情况3：同时使用 -->
    <router-link
      to="/settings"
      active-class="text-blue-500"
      exact-active-class="border-b-2 border-blue-500"
    >
      设置
    </router-link>
    <!--
      访问 /settings：text-blue-500 + border-b-2 border-blue-500
      访问 /settings/account：只有 text-blue-500
    -->
  </nav>
</template>

3.2 实际应用场景

<template>
  <!-- 场景1：面包屑导航 -->
  <div class="breadcrumb">
    <router-link 
      to="/home" 
      active-class="breadcrumb-active"
      exact-active-class="breadcrumb-exact-active"
    >
      首页
    </router-link>
    <span>/</span>
    <router-link 
      to="/products" 
      active-class="breadcrumb-active"
    >
      产品
    </router-link>
    <span v-if="$route.path.includes('/products/')">/</span>
    <router-link 
      v-if="$route.params.id"
      :to="`/products/${$route.params.id}`"
      exact-active-class="breadcrumb-exact-active"
    >
      详情
    </router-link>
  </div>
  
  <!-- 场景2：多级菜单 -->
  <div class="sidebar">
    <div class="menu-group">
      <router-link 
        to="/admin"
        active-class="menu-group-active"
      >
        管理后台
      </router-link>
      <div class="submenu" v-if="$route.path.startsWith('/admin')">
        <router-link 
          to="/admin/users"
          exact-active-class="submenu-active"
        >
          用户管理
        </router-link>
        <router-link 
          to="/admin/products"
          exact-active-class="submenu-active"
        >
          商品管理
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.breadcrumb-active {
  color: #666;
}
.breadcrumb-exact-active {
  color: #1890ff;
  font-weight: bold;
}
.menu-group-active {
  background-color: #f0f0f0;
}
.submenu-active {
  color: #1890ff;
  border-left: 3px solid #1890ff;
}
</style>

四、全局配置与最佳实践

4.1 全局配置（推荐方式）

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    // ... 其他路由
  ],
  
  // 全局配置 linkActiveClass 和 linkExactActiveClass
  linkActiveClass: 'router-link-active',
  linkExactActiveClass: 'router-link-exact-active'
})

export default router

<template>
  <!-- 使用全局配置 -->
  <router-link to="/home">
    首页 <!-- 自动应用 router-link-active 类 -->
  </router-link>
  
  <!-- 可以覆盖全局配置 -->
  <router-link 
    to="/about"
    active-class="custom-active"
  >
    关于 <!-- 使用 custom-active 而不是 router-link-active -->
  </router-link>
</template>

4.2 最佳实践：CSS 设计

/* 基础样式 */
.router-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

/* 激活状态 - 层级指示器 */
.router-link-active {
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  position: relative;
}

.router-link-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
  transform: scaleX(0.8);
}

/* 精确激活状态 - 当前页面指示器 */
.router-link-exact-active {
  color: #fff;
  background-color: #1890ff;
  font-weight: bold;
}

.router-link-exact-active::after {
  transform: scaleX(1);
  background-color: #fff;
}

/* 配合 Tailwind CSS */
<router-link 
  to="/dashboard"
  class="px-4 py-2 rounded-lg transition-colors"
  active-class="bg-blue-50 text-blue-600"
  exact-active-class="bg-blue-600 text-white"
>
  仪表盘
</router-link>

五、高级用法与技巧

5.1 动态 active-class

<template>
  <div>
    <!-- 根据路由动态设置 -->
    <router-link
      v-for="item in navItems"
      :key="item.path"
      :to="item.path"
      :active-class="getActiveClass(item)"
      :exact-active-class="getExactActiveClass(item)"
    >
      {{ item.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/', name: '首页', icon: 'home', priority: 'high' },
        { path: '/shop', name: '商城', icon: 'shop', priority: 'normal' },
        { path: '/admin', name: '管理', icon: 'admin', priority: 'high' }
      ]
    }
  },
  methods: {
    getActiveClass(item) {
      // 根据优先级返回不同的 active class
      switch(item.priority) {
        case 'high':
          return 'bg-red-50 text-red-600'
        case 'normal':
          return 'bg-gray-50 text-gray-600'
        default:
          return 'active'
      }
    },
    getExactActiveClass(item) {
      // 精确匹配时更强调的样式
      return this.getActiveClass(item) + ' font-bold border-l-4'
    }
  }
}
</script>

5.2 自定义组件封装

<!-- components/SmartLink.vue -->
<template>
  <router-link
    v-bind="$attrs"
    :active-class="computedActiveClass"
    :exact-active-class="computedExactActiveClass"
    v-on="$listeners"
  >
    <!-- 添加图标指示器 -->
    <span v-if="showIcon && isActive" class="active-indicator">▶</span>
    <slot />
  </router-link>
</template>

<script>
export default {
  name: 'SmartLink',
  inheritAttrs: false,
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    activeClass: {
      type: String,
      default: 'active'
    },
    exactActiveClass: {
      type: String,
      default: 'exact-active'
    }
  },
  computed: {
    isActive() {
      return this.$route.path.startsWith(this.$attrs.to)
    },
    computedActiveClass() {
      return `${this.activeClass} ${this.isActive ? 'smart-link-active' : ''}`
    },
    computedExactActiveClass() {
      const isExact = this.$route.path === this.$attrs.to
      return `${this.exactActiveClass} ${isExact ? 'smart-link-exact-active' : ''}`
    }
  }
}
</script>

<style scoped>
.active-indicator {
  margin-right: 4px;
  color: #1890ff;
}
.smart-link-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

5.3 组合式 API 用法

<template>
  <router-link
    ref="linkRef"
    :to="to"
    :class="linkClasses"
    @click="handleClick"
  >
    <slot />
  </router-link>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  to: { type: [String, Object], required: true },
  customActiveClass: String
})

const route = useRoute()
const router = useRouter()
const linkRef = ref(null)

// 计算激活状态
const isActive = computed(() => {
  return route.path.startsWith(typeof props.to === 'string' 
    ? props.to 
    : props.to.path)
})

const isExactActive = computed(() => {
  return route.path === (typeof props.to === 'string' 
    ? props.to 
    : props.to.path)
})

// 动态计算 class
const linkClasses = computed(() => {
  const classes = ['base-link']
  
  if (isActive.value) {
    classes.push(props.customActiveClass || 'active')
  }
  
  if (isExactActive.value) {
    classes.push('exact-active')
  }
  
  return classes
})

// 点击事件处理
const handleClick = (e) => {
  // 可以在这里添加点击分析、权限检查等
  console.log('导航到:', props.to)
}
</script>

六、常见问题与解决方案

6.1 问题：active-class 不生效

<template>
  <!-- 错误示例 -->
  <router-link to="/home" active-class="active">
    首页 <!-- ❌ 可能不生效 -->
  </router-link>
</template>

<!-- 解决方案1：检查 CSS 优先级 -->
<style>
/* ❌ 这可能被覆盖 */
.active {
  color: red;
}

/* ✅ 提高特异性 */
.router-link.active {
  color: red !important; /* 慎用 !important */
}

/* ✅ 更好的方式：使用 Vue 的 scoped */
<style scoped>
/* 这会自动添加 data-v-xxx 属性提高特异性 */
.active {
  color: red;
}
</style>

<!-- 解决方案2：使用全局类名 -->
<router-link 
  to="/home" 
  active-class="global-active-class"
>
  首页
</router-link>

<!-- 在全局 CSS 中 -->
<style>
.global-active-class {
  color: red;
}
</style>

6.2 问题：嵌套路由的激活状态

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome },      // /dashboard
      { path: 'profile', component: Profile },    // /dashboard/profile
      { path: 'settings', component: Settings }   // /dashboard/settings
    ]
  }
]

<template>
  <!-- Dashboard 组件内 -->
  <nav>
    <!-- 问题：访问 /dashboard/profile 时，所有链接都激活？ -->
    <router-link to="/dashboard" active-class="active">概览</router-link>
    <router-link to="/dashboard/profile" active-class="active">个人资料</router-link>
    
    <!-- 解决方案：使用 exact 或 exact-active-class -->
    <router-link 
      to="/dashboard" 
      exact-active-class="active"
    >
      概览
    </router-link>
    
    <router-link 
      to="/dashboard/profile" 
      exact-active-class="active"
    >
      个人资料
    </router-link>
    
    <!-- 或者使用嵌套样式 -->
    <router-link 
      to="/dashboard" 
      active-class="parent-active"
      exact-active-class="exact-active"
    >
      概览
    </router-link>
  </nav>
</template>

<style>
.parent-active {
  color: #666; /* 父级激活样式 */
}
.exact-active {
  color: #000; /* 精确激活样式 */
  font-weight: bold;
}
</style>

6.3 问题：与 UI 框架集成

<template>
  <!-- Element Plus 集成 -->
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="/home">
      <router-link 
        to="/home" 
        custom
        v-slot="{ navigate, isActive }"
      >
        <span @click="navigate" :class="{ 'is-active': isActive }">
          首页
        </span>
      </router-link>
    </el-menu-item>
  </el-menu>
  
  <!-- Ant Design Vue 集成 -->
  <a-menu :selected-keys="[$route.path]">
    <a-menu-item key="/home">
      <router-link to="/home">首页</router-link>
    </a-menu-item>
  </a-menu>
  
  <!-- Vuetify 集成 -->
  <v-list nav>
    <v-list-item
      v-for="item in items"
      :key="item.to"
      :to="item.to"
      active-class="v-list-item--active"
    >
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</template>

七、TypeScript 类型支持

// 全局类型声明
declare module 'vue-router' {
  interface RouterLinkProps {
    // active-class 的类型定义
    activeClass?: string
    exactActiveClass?: string
    // ... 其他属性
  }
}

// 组件中使用
import { RouterLink } from 'vue-router'

// 自定义组件封装
defineProps<{
  to: string | RouteLocationRaw
  activeClass?: string
  exactActiveClass?: string
  customActive?: boolean
}>()

// 组合式API中使用
const linkProps = {
  to: '/dashboard',
  activeClass: computed(() => isActive.value ? 'active' : ''),
  exactActiveClass: 'exact-active'
} as const

总结

active-class 是 Vue Router <router-link> 组件的核心属性，用于管理导航链接的激活状态。记住以下几点：

关键要点：

1. 属于 ：<router-link> 组件（Vue Router 提供）
2. 作用：控制路由匹配时的样式类
3. 配对属性 ：exact-active-class（精确匹配）
4. 最佳实践：在路由配置中全局设置
5. CSS 策略：使用 scoped 样式或全局类名

使用原则：

• 简单导航：使用默认或全局配置
• 复杂菜单 ：结合 exact-active-class 区分子路由
• UI 框架：查看框架文档的集成方案
• 性能考虑：避免在大量链接上使用复杂计算

<!-- 终极最佳实践示例 -->
<router-link
  :to="{ name: 'Home' }"
  class="nav-link"
  active-class="nav-link--active"
  exact-active-class="nav-link--exact-active"
>
  首页
</router-link>

掌握了 active-class，你就掌握了 Vue 单页应用导航状态管理的精髓！现在就去优化你的导航菜单吧！