umi4+antDesignPro实现多tabs

项目中经常会使用多tabs状态保持的状态效果，如图：

最近umi升级到umi4了，antDesignPro也有升级，看到最新的消息，是antDesignPro已经内置了多tabs功能了，在项目创建好之后，只需要一些简单的配置就可以了。

1.项目创建

创建项目，可参考：开始使用 - Ant Design Pro

可以使用ant-design-pro的脚手架来创建

项目创建指令：

# 安装antdesignpro的脚手架
npm i @ant-design/pro-cli -g

# 创建项目
pro create myapp

项目创建后，安装下依赖，直接运行就可以了。

2. 配置支持多tabs

由于已经支持了多tabs功能，只需要做一些简单的配置

配置文件：config/config.ts

  // 多tabs布局，只需要配置下面两项即可
  keepalive: [/./],
  tabsLayout: {},

在配置项中新增这2个配置项就可以了，其他的都不需要动，然后刷新页面，效果出来了，效果

 

参考：网友需求 - 使用 50 行代码在 Ant Design Pro 中完成 Umi 状态保持的多tabs布局 - 掘金