vue2.0中關於active-class

一、首先，active-class是什么，

active-class是vue-router模塊的router-link組件中的屬性，用來做選中樣式的切換；

相關可查閱文檔：https://router.vuejs.org/zh-cn/api/router-link.html

 

二、在vue-router中要使用active-class有兩種方法：

 

1、直接在路由js文件中配置linkActiveClass

 

export default new Router({

 

  linkActiveClass: 'active',

 

})

 

2、在router-link中寫入active-class

 

<router-link to="/home" class="menu-home" active-class="active">首頁</router-link>

 

三、最近在項目中出現一個問題，使用第二種方法添加active-class，跳轉到my頁面后，兩個router-link始終都會有選中樣式，代碼如下

<div class="menu-btn">
  <router-link to="/" class="menu-home" active-class="active">
    首頁
  </router-link>
</div>
<div class="menu-btn">
  <router-link to="/my" class="menu-my" active-class="active">
    我的
  </router-link>
</div>

四、后來發現是因為 to="/" 引起的，active-class選擇樣式時根據路由中的路徑去匹配，然后顯示，

例如在my頁面中，路由為 ，那么to="/”和to="/my"都可以匹配到，所有都會激活選中樣式

 

五、要解決問題也有兩種方式，都是通過加入一個exact屬性

　　1、直接在路由js文件中配置linkActiveClass

export default new Router({

  linkExactActiveClass: 'active',

})

　　2、在router-link中寫入exact

<router-link to="/" class="menu-home" active-class="active" exact>首頁</router-link>

六、不過我不是用exact這種方法去解決的，我的方法是

<router-link to="/home" class="menu-home" active-class="active" exact>首頁</router-link>

路由中加入重定向

{
  path: '/',
  redirect: '/home'
}

要是你，你會選擇哪一種呢？哈哈，歡迎互動 :-）