wodax-umi-plugin-cache-route

WodaX project keep alive plugin for react project

Usage no npm install needed!

<script type="module">
  import wodaxUmiPluginCacheRoute from 'https://cdn.skypack.dev/wodax-umi-plugin-cache-route';
</script>

README

wodax-umi-plugin-cache-route

NPM version NPM downloads

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.jsonscripts部分添加如下命令

    {
        "scripts":{
          "backup-router-file": "umi keepalive"
        }
    }
    
  2. 运行 yarn run backup-router-fileyarn 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