解決elementUI菜單在vue中切換路由不高亮的問題

場景:項目中需要用到webscoket  推送過來的信息 點擊信息按鈕  跳轉到指定的頁面 路由改變了 可是菜單還是上一次的菜單高亮

elementUI 裏面有個屬性 

通過設置這兩個屬性實現激活菜單的顏色

active-text-color 當前激活菜單的文字顏色(僅支持 hex 格式) string #409EFF

 

text-color 菜單的文字顏色(僅支持 hex 格式) string #303133

 

$route.path當前的路由 我這邊的index是字符串表示路由

然後通過elementUI提供的方法

select 菜單激活回調 index: 選中菜單項的 index, indexPath: 選中菜單項的 index path

 

在data上面定義一箇中間變量activeIndex

監聽路由的變化

這樣就大功告成 不管你頁面怎麼使用this.$router.push({path:'/xxx'}) 菜單都會跟隨激活

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章