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

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

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

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

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

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

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

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

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

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

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

exact

類型: boolean

默認值: false

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

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

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

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

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

然后，官網(wǎng)上還可以這樣玩：

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

 </ul>
```

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

最新評論