wodax-umi-plugin-cache-route
v1.0.3
Published
WodaX project keep alive plugin for react project
Downloads
3
Readme
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']
}],
],
}
特别说明:
关于插件
wodax-umi-plugin-cache-route
的选项:- 选项
keepalive
: (数组) 在约定式配置路由中,需要特别指明;哪些路由需要开启 keepalive特性;配置式路由中,一般也可以指定,也会被处理
- 选项
关于在配置路由中的说明:
- 手动指定路由开启 keepalive, 可是在 route 的属性项中添加
keepAlive
: true - 路由中有参数化路由,如: 包含
:
字样的路由,可以手动指定multiple
: true
- 手动指定路由开启 keepalive, 可是在 route 的属性项中添加
关于选项
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. 强制备份源路由文件
在
package.json
中scripts
部分添加如下命令{ "scripts":{ "backup-router-file": "umi keepalive" } }
运行
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