vue路由实现点击class

Vue 路由实现点击添加 class

在 Vue 中通过路由实现点击添加 class 可以通过以下几种方式实现，主要涉及 router-link 和动态 class 绑定。

使用 router-link 的 active-class

router-link 默认会在路由匹配时自动添加 router-link-active class，可以通过 active-class 属性自定义 class 名称。

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

.active {
  color: red;
  font-weight: bold;
}

动态绑定 class

通过 :class 动态绑定 class，结合当前路由路径判断是否添加 class。

<router-link 
  to="/home" 
  :class="{ active: $route.path === '/home' }"
>
  Home
</router-link>

使用 Vuex 或状态管理

在更复杂的场景中，可以通过 Vuex 存储当前激活的路由，动态绑定 class。

// store.js
state: {
  activeRoute: '/home'
}

<router-link 
  to="/home" 
  :class="{ active: $store.state.activeRoute === '/home' }"
>
  Home
</router-link>

监听路由变化

通过监听路由变化，手动添加或移除 class。

watch: {
  $route(to, from) {
    if (to.path === '/home') {
      document.getElementById('home-link').classList.add('active')
    } else {
      document.getElementById('home-link').classList.remove('active')
    }
  }
}

使用 exact 精确匹配

router-link 的 exact 属性可以确保路径完全匹配时才添加 class。

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

以上方法可以根据具体需求选择适合的方式实现点击添加 class 的效果。