當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法
當(dāng)我們需要做一個類似頂部 或 底部導(dǎo)航欄公共組件的時候，單擊某個導(dǎo)航欄按鈕，跳轉(zhuǎn)到另一個組件，
并且改變導(dǎo)航欄按鈕的樣式，如果用<router-link to=""><router-link/> 跳轉(zhuǎn)的時候，我們可以這樣做，
改變router-link-active 的樣式，它是路由path指向當(dāng)前組件時系統(tǒng)自動生成的。
先看下效果：
貼上我的路由文件js
export default new Router({
routes: [
{
path: '/',
component: App,
children:[
// 二級路由
{
path:'',
component:common_nav,
children:[
{
path:'/html',
component:html
},
{
path:'/js',
component:js
},
{
path:'/css',
component:css
},
{
path:'/img',
component:img
}
]
}
]
}
]
})
拓展知識：解決vue在路由過程中，改變導(dǎo)航欄的單個點(diǎn)擊樣式的問題
當(dāng)我們做一個公共底部組件，類似于tab選項(xiàng)卡或者導(dǎo)航欄，單擊路由到另外一個組件上的時候，我們改變當(dāng)前路由的樣式問題，并且返回，樣式不會初始化，因?yàn)樗怯陕酚蓻Q定的
如果導(dǎo)航欄全部都是由router-link包含跳轉(zhuǎn)的話，有一個非常好的方法
router-link-active
—-.router-link-active這個class，是當(dāng)路由path指向當(dāng)前組件時自動生成的，可以在此處設(shè)置樣式（選中狀態(tài)）
以上這篇當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3無config文件夾打包后頁面空白問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
VuePress 由兩部分組成：一個以 Vue 驅(qū)動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具，和一個為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的2019-11-11
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
近期在做ve3的項(xiàng)目時因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue?計算屬性之姓名案例的三種實(shí)現(xiàn)方法
這篇文章主要介紹了Vue?計算屬性之姓名案例的三種實(shí)現(xiàn)方法，計算屬性實(shí)現(xiàn)、methods實(shí)現(xiàn)和插值語法實(shí)現(xiàn)，下面文章具體介紹，需要的小伙伴可以參考一下2022-05-05
解決vue axios的封裝 請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯誤提示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element?table?數(shù)據(jù)量大頁面卡頓的解決
這篇文章主要介紹了element?table?數(shù)據(jù)量大頁面卡頓的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊，今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧，需要的朋友一起看看吧2021-08-08