ant design vue pro中,人為控制菜單選中狀態(包括操作子路由時讓父級菜單選中狀態)


問題場景:

在ant design vue pro前端框架中,菜單是通過路由來配置,如下圖所示,“測試版本”菜單下有“測試計划列表”數據,當點擊某個計划數據進入其他頁面后,“測試版本”菜單的樣式就失去選中狀態了

這里涉及一個問題,“測試計划”數據對應的路由和“測試版本”路由之間不是父子關系,在網上搜索的時候,較常看到如何設置父級菜單的選中狀態,這里的解決辦法不用管是否是父子關系。

 

 

解決思路:

先看下ant design vue pro的layout布局方式(前人基礎上的工程):

 

基礎布局中,通過side-menu組件控制布局,找到side-menu組件:

 

 

從引用關系,依賴index組件,再找到index組件:

 

 發現index中依賴menu組件,再找到menu(就是這里添加代碼)

發現在有個更新菜單的函數,里面會根據路由的path動態拼裝選中的路由地址

解決方法:就在拼裝好this.selectedKeys后,加入一個判斷,根據當前所選路由,判斷是否要在this.selectedKeys中添加要選中的菜單路由path。

 

 

 測試結果:目前好用。

 可以看到,路由已經切到測試計划,但是“測試版本”菜單仍然是選中狀態。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM