Vue 解決父組件跳轉子路由后當前導航active樣式消失問題
舉個栗子,導航欄如下圖,當前新聞資訊的路由是:localhost:8083/#/new,導航欄樣式如圖所示:

隨便挑個新聞點擊后會跳轉到子路由:localhost:8083/#/new/newDetail,這時候新聞資訊的主路由style樣式出現消失的問題,如下圖:

style代碼:
.router-link-exact-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important; }
router.js代碼:
{ path: ’/new’, name: ’new’, component: news, children: [ { path: ’/new/newDetail’, name: ’newDetail’, component: newsDetail } ] }
解決方案:
將style方案改成下面即可
.router-link-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important;}
類名設置為router-link-active,即使是跳轉到子路由也不會影響到主路由的樣式問題
補充知識:解決element-ui中el-menu組件作為vue-router模式在刷新頁面后default-active屬性與當前路由頁面不一致問題的方法
解決辦法是給menu的default-active綁定route.path
形如:
<el-menu :default-active='$route.path' ...>
每次渲染menu都會讀當前path 設置為default-active
以上這篇Vue 解決父組件跳轉子路由后當前導航active樣式消失問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。
相關文章:
1. python 制作python包,封裝成可用模塊教程2. 解決Django響應JsonResponse返回json格式數據報錯問題3. asp.net core服務限制堆內存大小的操作方法4. Python爬取12306車次信息代碼詳解5. Python文字截圖識別OCR工具實例解析6. python實現處理mysql結果輸出方式7. 通過vue如何設置header8. 解決python腳本中error: unrecognized arguments: True錯誤9. Python 實現將某一列設置為str類型10. Python使用paramiko連接遠程服務器執行Shell命令的實現

網公網安備