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

創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元龍崗做網(wǎng)站,已為上家服務(wù),為龍崗各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

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

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

組件支持用戶在具有路由功能的應(yīng)用中（點擊）導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 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

默認(rèn)值: false

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

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

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

在考慮到Menu組件的默認(rèn)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)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：vueiview的菜單組件Mune點擊不高亮的解決方案
網(wǎng)址分享：http://www.rwnh.cn/article6/jiphog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站設(shè)計、外貿(mào)建站、云服務(wù)器、標(biāo)簽優(yōu)化、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)