vue-router為激活的路由設(shè)置樣式操作
1.首先先寫好類名
2.在router里的js文件中添加 linkActiveClass:'active'
補充知識:記錄vue遇到問題,子頁面沒有router-link對應(yīng)導(dǎo)航欄激活樣式
如下所示:
li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基礎(chǔ)檢索</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中子頁面鏈接名稱,指定對應(yīng)上級頁面的導(dǎo)航樣式是否激活
以上這篇vue-router為激活的路由設(shè)置樣式操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用elementui實現(xiàn)樹組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實現(xiàn)對樹組件tree右鍵增刪改功能,右擊節(jié)點可進行增刪改,對節(jié)點數(shù)據(jù)進行模糊查詢功能,本文給大家分享了完整代碼,需要的朋友可以參考下2022-08-08vue3中使用keepAlive緩存路由組件不生效的問題解決
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問題解決,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-06-06前端使用print.js實現(xiàn)打印功能(基于vue)
最近新接了一個需求,想要在前端實現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05利用vue.js實現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實現(xiàn)被選中狀態(tài)的改變方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02