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

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

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

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

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

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

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

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

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

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

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

exact

類型: boolean

默認(rèn)值: false

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

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

<!-- 這個(gè)鏈接只會(huì)在地址為 / 的時(shí)候被激活 --> <router-link to="/" exact>

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

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

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

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

 </ul>
```

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

最新評(píng)論