antd pro(ProLayout) mix混合菜单不生效

一、问题描述

antd pro的混合菜单模式，算是一种比较新的导航菜单模式，可以让顶部全局导航+侧边导航混合模式同时出现，满足一些特别的需求。

ProLayout高级布局组件的API里有一个layout参数，可以设置layout的菜单模式，我们可以在config配置文件做配置。

// layout的菜单模式。side：右侧导航，top：顶部导航，mix: 混合菜单
layout: 'side' | 'top' | 'mix';

那么问题来了，为什么我们把layout设置为mix后，界面的导航菜单看起来还是和side右侧导航模式一样呢，并没产生改变。为什么会不生效呢？这是很多首次应用mix模式的同学都会产生疑惑的地方。

二、解决方案

要实现理想中的混合菜单模式，即顶部全局导航+侧边导航混合，顶部展示一级菜单，侧边展示二三级菜单，我们还需要增加一个配置：splitMenus，即自动切割菜单，该功能只在mix模式下生效。具体配置如下：

layout: 'mix', // 菜单模式
splitMenus: true, // 切割菜单

具体效果如下：

 【推荐文章】

微前端系列讲解--应用集成方案（qiankun+umi+vue）https://blog.csdn.net/w544924116/article/details/120105320antd pro项目使用qiankun，loading加载页不消失https://blog.csdn.net/w544924116/article/details/120164997Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错 / 同时使用mfsu和qiankun报错https://blog.csdn.net/w544924116/article/details/120123331引用window自定义变量以及ts在window上自定义变量数据类型报错的解决方案https://blog.csdn.net/w544924116/article/details/120251686

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。