正常菜單是在左側,我們項目菜單比較多,要做成頂部和左側結合的形式
如圖:
ant design pro官方文檔支持這種格式 文檔連接: https://procomponents.ant.design/components/layout/#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8
設置方法也很簡單
修改根目錄的config文件夾下的defaultSettings.ts文件
將layout設置為'mix', splitMenus設置為true
這樣菜單就變成頂部+側邊的模式了
這里要注意,這種模式下,一定要設置routes里面的路由重定向,否則點擊會顯示空白頁
沒有設置重定向的頁面,
路由重定向寫法
在你的路由文件中,一般是在根路由的config文件夾的routes文件里
因為這個菜單的父子層級是關聯的,點擊父級只是children的折疊, 所以父級的path需要定向到最末尾的子級children上
總結一下,設置混合菜單主要是兩點:
1.修改defaultSettings.ts的layout設置為'mix', splitMenus設置為true
2.路由文件父級的路徑需要設置重定向