前言： 在項目中，我用到了vue +iview + vue-router 開發(fā)； 然后導航條就使用了iview的Menu組件，結果發(fā)覺導航條的內容點擊一次之后不會顯示高亮樣式，而是先跳轉了，我再點擊一次，才會高亮顯示。

在看了vue-router的文檔之后，發(fā)覺有一個很好用的東西，就是router-link的屬性： active-class 和 exact。

為什么要使用router-link? 官網上說明了這幾點好處：

組件支持用戶在具有路由功能的應用中（點擊）導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 a 標簽，可以通過配置 tag 屬性生成別的標簽.。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名。

比起寫死的 <a href="..." rel="external nofollow" > 會好一些，理由如下：

無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

在 HTML5 history 模式下，router-link 會守衛(wèi)點擊事件，讓瀏覽器不再重新加載頁面。

當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。

首先， active-class可以指定一個高亮時的樣式, 比如我定義一個白色粗體的樣式：

  color: #fff;
  font-weight: bold;
  }

然后，就是exact,文檔介紹是這樣的

exact

類型: boolean

默認值: false

“是否激活” 默認類名的依據是 inclusive match （全包含匹配）。 舉個例子，如果當前的路徑是 /a 開頭的，那么 也會被設置 CSS 類名。

按照這個規(guī)則，每個路由都會激活！想要鏈接使用 “exact 匹配模式”，則使用 exact 屬性：

<!-- 這個鏈接只會在地址為 / 的時候被激活 --> <router-link to="/" exact>

在考慮到Menu組件的默認css可能會影響我的導航欄，所以我果斷不用Menu組件，然后使用ul標簽；最后，我的代碼長這樣：

<ul> 
<li> 
<router-link to="/" active-class="active" > 首頁</roouter-link> 
</li> 
</ul> 

然后，官網上還可以這樣玩：

“` 
<router-link to="/" active-class="active" tag="li" ><a>首頁</a></roouter-link>

 </ul>
```

以上這篇vue iview的菜單組件Mune 點擊不高亮的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論