問題場景:
在ant design vue pro前端框架中,菜單是通過路由來配置,如下圖所示,“測試版本”菜單下有“測試計划列表”數據,當點擊某個計划數據進入其他頁面后,“測試版本”菜單的樣式就失去選中狀態了
這里涉及一個問題,“測試計划”數據對應的路由和“測試版本”路由之間不是父子關系,在網上搜索的時候,較常看到如何設置父級菜單的選中狀態,這里的解決辦法不用管是否是父子關系。
解決思路:
先看下ant design vue pro的layout布局方式(前人基礎上的工程):
基礎布局中,通過side-menu組件控制布局,找到side-menu組件:
從引用關系,依賴index組件,再找到index組件:
發現index中依賴menu組件,再找到menu(就是這里添加代碼)
發現在有個更新菜單的函數,里面會根據路由的path動態拼裝選中的路由地址
解決方法:就在拼裝好this.selectedKeys后,加入一個判斷,根據當前所選路由,判斷是否要在this.selectedKeys中添加要選中的菜單路由path。
測試結果:目前好用。
可以看到,路由已經切到測試計划,但是“測試版本”菜單仍然是選中狀態。