當(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選項卡或者導(dǎo)航欄，單擊路由到另外一個組件上的時候，我們改變當(dāng)前路由的樣式問題，并且返回，樣式不會初始化，因為他是由路由決定的
如果導(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)文章
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09![Vuex報錯之[vuex] unknown mutation type: handlePower問題及解決](http://img.jbzj.com/images/xgimg/bcimg1.png)
Vuex報錯之[vuex] unknown mutation type: han
這篇文章主要介紹了Vuex報錯之[vuex] unknown mutation type: handlePower問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04
這篇文章主要介紹了基于vue實(shí)現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue中實(shí)現(xiàn)回車鍵登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下2024-08-08
vue3父子同信的雙向數(shù)據(jù)的項目實(shí)現(xiàn)
我們知道的是，父傳子的通信，和子傳父的通信，那如何實(shí)現(xiàn)父子相互通信的呢，本文就來詳細(xì)的介紹一下，感興趣的可以了解一下2023-08-08
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下2017-06-06