wodax-umi-plugin-cache-route

WodaX Project use keep alive

Usage 用法

1. 添加插件

在 .umirc.js 或 约定式配置文件中 config.js(或ts) 中，启动插件部分，编写如下内容：

export default {
  plugins: [
    ['wodax-umi-plugin-cache-route', {
      keepalive:['/report/detail','/shop']
    }],
  ],
}

特别说明：

1. 关于插件 wodax-umi-plugin-cache-route 的选项：

   • 选项keepalive: （数组） 在约定式配置路由中，需要特别指明；哪些路由需要开启 keepalive特性；配置式路由中，一般也可以指定，也会被处理

2. 关于在配置路由中的说明：

   • 手动指定路由开启 keepalive， 可是在 route 的属性项中添加 keepAlive: true
   • 路由中有参数化路由，如： 包含 : 字样的路由，可以手动指定 multiple: true

3. 关于选项keepalive与配置路由中存在冲突的说明：

   keepalive 选项中的配置的路由优先级高，将覆盖配置路由中的设置

2. 配置路由

• 配置式路由代码示例

  export default {
    plugins: [
      ['wodax-umi-plugin-cache-route', {
        keepalive:[]
      }],
    ],
    routes: [
      {
        path: '/',
        component: '../layouts/index',
        routes: [
          {
            path: '/list',
            component: './list',
            keepAlive: true,
          },
          {
            path: '/item',
            component: './item',
          },
        ],
      },
    ]
  };

• 约定式路由代码示例

  export default {
    plugins: [
      ['wodax-umi-plugin-cache-route', {
        keepalive:['/list']  // keepalive是个数组，这里要明确哪些路由需要开启keepalive，如: '/list' 路由
      }],
    ],
  }

3. 强制备份源路由文件

1. 在 package.json 中 scripts部分添加如下命令

   {
       "scripts":{
         "backup-router-file": "umi keepalive"
       }
   }

2. 运行 yarn run backup-router-file 或 yarn backup-router-file 命令

   yarn backup-router-file

4. 如何UI中手动解除Keep

/// 代码示例
import { dropByCacheKey } from 'umi';
 
export default () => {
  const clearCache = () => {
    dropByCacheKey('/list');
  };
  return (
    <Card>
      <Button onClick={clearCache}>clear list page cache</Button>
    </Card>
  );
};
 

LICENSE

MIT