vue-router為激活的路由設置樣式操作

更新時間：2020年07月18日 10:03:11 作者：丶Eric

這篇文章主要介紹了vue-router為激活的路由設置樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1.首先先寫好類名

2.在router里的js文件中添加 linkActiveClass:'active'

補充知識：記錄vue遇到問題，子頁面沒有router-link對應導航欄激活樣式

如下所示：

li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基礎檢索</router-link></li>

 data () {
 return {
  imgUrl,
  linkBoolean:false
 }
 },
 created(){
 
 if(this.$route.path == "/storeDetails" || this.$route.path == "/utxoDetails" ||      
 this.$route.path == "/blockAllDetails"){
  this.linkBoolean = true
 }
 },

根據(jù)Router中子頁面鏈接名稱，指定對應上級頁面的導航樣式是否激活

以上這篇vue-router為激活的路由設置樣式操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue動態(tài)設置img的src不生效的問題解決
本文主要介紹了Vue動態(tài)設置img的src不生效的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-01-01
vue實現(xiàn)實時上傳文件進度條
這篇文章主要為大家詳細介紹了vue實現(xiàn)實時上傳文件進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
elementui[el-table]toggleRowSelection默認多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認多選事件無法選中問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue+elementui 對話框取消表單驗證重置示例
今天小編就為大家分享一篇vue+elementui 對話框取消表單驗證重置示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別小結(jié)
這篇文章主要給大家介紹了關于vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
vue實現(xiàn)添加與刪除圖書功能
這篇文章主要介紹了vue實現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
NUXT SSR初級入門筆記(小結(jié))
這篇文章主要介紹了NUXT SSR初級入門筆記(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
Vue2?Element?description組件列合并詳解
在使用Vue的時候經(jīng)常會涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
Vuex中mutations的用法及說明
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue3和ts封裝axios以及使用mock.js詳解
目前前端最流行的網(wǎng)絡請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關于vue3和ts封裝axios以及使用mock.js的相關資料,文章通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02