當我們需要做一個類似頂部 或 底部導航欄公共組件的時候，單擊某個導航欄按鈕，跳轉到另一個組件，

并且改變導航欄按鈕的樣式，如果用<router-link to=""><router-link/> 跳轉的時候，我們可以這樣做，

改變router-link-active 的樣式，它是路由path指向當前組件時系統自動生成的。

先看下效果：

貼上我的路由文件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指向當前組件時自動生成的，可以在此處設置樣式（選中狀態）

以上這篇當vue路由變化時,改變導航欄的樣式方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。