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