vue路由实现点击class

Vue 路由实现点击添加 class 的方法

在 Vue 项目中，通过路由实现点击时为元素添加 class 可以通过以下几种方式实现：

方法一：使用 router-link 的 active-class 属性

<router-link 
  to="/path" 
  active-class="active-class-name" 
  exact-active-class="exact-active-class-name"
>
  链接文本
</router-link>

active-class 会在路由匹配时自动添加，exact-active-class 仅在精确匹配时添加。

方法二：通过编程式导航和动态 class 绑定

<template>
  <div 
    @click="handleClick('/path')" 
    :class="{ 'active-class-name': isActive('/path') }"
  >
    点击元素
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(path) {
      this.$router.push(path);
    },
    isActive(path) {
      return this.$route.path === path;
    }
  }
};
</script>

方法三：使用 Vue Router 的 linkActiveClass 全局配置

const router = new VueRouter({
  routes: [...],
  linkActiveClass: 'global-active-class',
  linkExactActiveClass: 'global-exact-active-class'
});

方法四：结合 CSS 伪类实现

.router-link-active {
  /* 激活状态样式 */
}
.router-link-exact-active {
  /* 精确匹配样式 */
}

注意事项

• 动态路由需要处理匹配逻辑时，可在 isActive 方法中使用 $route.matched
• 嵌套路由需注意 exact 属性的使用
• 使用 active-class 时，默认会添加 router-link-active 和 router-link-exact-active

以上方法可根据项目需求选择使用，通常方法一和方法二结合使用最为灵活。