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