當vue路由變化時,改變導航欄的樣式方法

更新時間：2018年08月22日 14:55:17 作者：ShiYadong_

今天小編就為大家分享一篇當vue路由變化時,改變導航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

改變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包含跳轉(zhuǎn)的話，有一個非常好的方法

router-link-active

—-.router-link-active這個class，是當路由path指向當前組件時自動生成的，可以在此處設(shè)置樣式（選中狀態(tài)）

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

您可能感興趣的文章:

相關(guān)文章

vue 使某個組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vuex報錯之[vuex] unknown mutation type: han
這篇文章主要介紹了Vuex報錯之[vuex] unknown mutation type: handlePower問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vant?Weapp組件picker選擇器初始默認選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認選中問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
ElementUI修改實現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧
2025-04-04
基于vue實現(xiàn)微博三方登錄流程解析
這篇文章主要介紹了基于vue實現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-11-11
vue中實現(xiàn)回車鍵登錄功能
這篇文章主要介紹了vue中實現(xiàn)回車鍵登錄功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
Vue?關(guān)于Store的用法小結(jié)
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ù)的項目實現(xiàn)
我們知道的是，父傳子的通信，和子傳父的通信，那如何實現(xiàn)父子相互通信的呢，本文就來詳細的介紹一下，感興趣的可以了解一下
2023-08-08
vue-loader教程介紹
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下
2017-06-06