在antd-pro v2 里多页签、多开、并keepAlive

1. 如何在antd-pro里做keepAlive（react是没有vue里的keep-alive）

• 下载 umi-plugin-cache-route(v2)插件并引入

 //routepath写入path
 const plugins = [
  ['umi-plugin-cache-route', {
    keepalive: ['route path', 'route path'] 
  }],
];

// 用户管理
{
  path: '/systembase/userManager/userManager',
  component: './SystemBase/UserManager/userManager',
  keepAlive: true,
},
// 角色管理
{
  path: '/systembase/roleManager/roleManager',
  component: './SystemBase/RoleManager/roleManager',
  keepAlive: true,
},

• 在关闭tab页销毁缓存，并清空动态添加的路由routes

import { dropByCacheKey } from 'umi';
/**
 * @Description 关闭标签清除对应的routes,在config routes里的不允许清除
 * @param pathnameArr :pathname数组
 */
clearRoutes=(pathnameArr)=>{
  const {
    route: { routes },
  } = this.props;
  const {basicRoutes}=this.state;
  pathnameArr&&pathnameArr.map(pathname=>{
    dropByCacheKey(pathname);
    const idx=basicRoutes.findIndex(item=>item.path == pathname);
    if(idx>-1){
      return;
    }
    const index=routes.findIndex((item)=> item.path == pathname);
    if(index>-1){
      routes.splice(index,1);
    }
  })
}

2. 如何在antd-pro多页签（这个还比较好做，不做过多介绍）

<Content className="contents">
  {hidenAntTabs ? (
    children
  ) : tabList && tabList.length ? (
    <Dropdown overlay={menuItems} trigger={['contextMenu']}>
      <div>
        <Tabs
          style={{ height: 34, marginTop: -3 }}
          activeKey={activeKey}
          onChange={this.onChange}
          onEdit={this.onEdit}
          tabBarStyle={{ background: '#fff' }}
          tabPosition="top"
          type="editable-card"
          hideAdd
        >
          {tabList.map((item) => (
            <TabPane
              tab={item.title}
              key={item.key}
              closable={tabList[0].key !== item.key || tabList[0].pathname !== "/"}
            />
          ))}
        </Tabs>
      </div>
    </Dropdown>
  ) : null}
  {children}
</Content>

3. 如何多开并保存数据问题

• 首先路由要动态配置

// 匹配test管理
{
  path: '/businessmanager/testManager/testManager',
  component: './Business/testManager/index.js',
  keepAlive: true,
  exact:true
},
//匹配空白页面，：page是为了动态添加路由
{
  path: '/businessmanager/testManager/testManager/:page',
  component: './none',
  keepAlive: true,
  exact:true
},

• 点击左侧菜单跳转的（新开界面）

// 通过context从basicLayout传递sidermenu调用，changeRoutes函数在下面。

// component: require('@/pages/Business/testManager/index.js').default,

// pathname = attributes.url + '/' + randomNum;
this.context.changeRoutes(
  { ...newRouteObj, path: `${pathname}`, keepAlive: true },
  {
    addOpen: true
  },
  true,
  `${pathname}`,
  `${name}${i}`
);

• 点击tab页跳转（跳转已有界面）--这个就是切换下路由router.replace(pathname)...

• 新开界面跳转函数

/**
 *
 * @Description 新增路由，再进行跳转
 * @param params :新增跳转参数
 * @param query:带入query
 * @param addOpen:是否多开依次递增
 * @param pathname：跳转地址，也是区分不同界面的标识
 * @param title：tab title
 */
changeRoutes=(params,query,addOpen,pathname,title)=>{
  const {
    route: { routes },
  } = this.props;
  !routes.some((item)=> item.path == pathname)&&routes.push({
    ...params,
    exact: true,
  });
  router.push({
    pathname,
    query: { ...query,addOpen},
    title,
  });
}