vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案
前言： 在項(xiàng)目中，我用到了vue +iview + vue-router 開發(fā)； 然后導(dǎo)航條就使用了iview的Menu組件，結(jié)果發(fā)覺導(dǎo)航條的內(nèi)容點(diǎn)擊一次之后不會(huì)顯示高亮樣式，而是先跳轉(zhuǎn)了，我再點(diǎn)擊一次，才會(huì)高亮顯示。
在看了vue-router的文檔之后，發(fā)覺有一個(gè)很好用的東西，就是router-link的屬性： active-class 和 exact。
為什么要使用router-link? 官網(wǎng)上說明了這幾點(diǎn)好處：
組件支持用戶在具有路由功能的應(yīng)用中（點(diǎn)擊）導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 a 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。
比起寫死的 <a href="..." rel="external nofollow" > 會(huì)好一些，理由如下：
無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級(jí)使用 hash 模式，無須作任何變動(dòng)。
在 HTML5 history 模式下，router-link 會(huì)守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁(yè)面。
當(dāng)你在 HTML5 history 模式下使用 base 選項(xiàng)之后，所有的 to 屬性都不需要寫（基路徑）了。
首先， 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 開頭的，那么 也會(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中
這篇文章主要介紹了Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue如何實(shí)現(xiàn)角色權(quán)限的控制
關(guān)于角色與權(quán)限控制,通常是分為兩大類,一種是菜單權(quán)限,一種是操作權(quán)限,本文將深入探討如何通過?Vue?實(shí)現(xiàn)角色權(quán)限控制,特別是基于按鈕級(jí)別的權(quán)限控制,需要的可以了解下2025-02-02
路由守衛(wèi)，簡(jiǎn)單理解來說就是，當(dāng)用戶要進(jìn)行一些操作時(shí)，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會(huì)同意用戶進(jìn)行操作，說到這里，我想大家心里都或多或少有點(diǎn)理解了吧2023-01-01
Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪
這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue前端導(dǎo)出Excel文件的詳細(xì)實(shí)現(xiàn)方案
在開發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue通過vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的全過程
這篇文章主要介紹了Vue通過vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的操作步驟,文中有詳細(xì)的代碼示例和圖文供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-04-04
這篇文章主要介紹了vue elementUI 上傳非空驗(yàn)證,原理就是寫一個(gè)假的紅色*號(hào),每次點(diǎn)擊查看的時(shí)候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue項(xiàng)目中遇到的深拷貝淺拷貝問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04