README
equota-keep-alive
umi 中实现 keep-alive 功能的插件
Install
Using npm:
$ npm install --save-dev equota-keep-alive
or using yarn:
$ yarn add equota-keep-alive --dev
启用方式
配置插件开启
export default {
plugins: ['equota-keep-alive'],
};
介绍
本插件不可直接使用,必须搭配 @umijs/plugin-model
一起使用。
配置
扩展的路由配置
插件会基于 umi 的路由,封装了配置项。
keepAliveLayout
布局所在的位置,需要在菜单中只隐藏此项,子项往上提。(配和
@umijs/plugin-layout
使用时不用处理菜单)keepAlive
需要使用 keepAlive 的路由
//config/route.ts
export default [
{
path: '/',
keepAliveLayout: true,
routes: [
{
path: '/management',
name: '设备管理',
icon: 'appstore',
routes: [
{
path: '/management/index',
name: '管理1',
component: '@/pages/home',
},
{
path: '/management/Two',
name: '管理2',
keepAlive: true, // keepAlive
component: '@/pages/home',
},
{
path: '/management/Three',
name: '管理3',
keepAlive: true, // keepAlive
component: '@/pages/home',
},
{
path: '/management',
redirect: '/management/index',
},
],
},
],
},
];
API
useModel
配合 useModel
获取 keepAliveElements 和 dropByCacheKey 方法
import { useModel } from 'umi';
export default () => {
const { keepAliveElements, dropByCacheKey } = useModel('@keepAlive');
return <>...</>;
};
keepAliveElements
- Type:
Object
- Default:
{}
keepAlive 中保存的 elements
dropByCacheKey
- Type:
(path: string) => void
移除缓存的页面
import { useEffect } from 'react';
import { useModel } from 'umi';
export default () => {
const { dropByCacheKey } = useModel('@keepAlive');
useEffect(() => {
if (pathname) {
dropByCacheKey('/list/demo');
// dropByCacheKey('/list/details/:id');
}
}, [pathname]);
return <>...</>;
};