Keep Alive

安装

$ yarn add umi-plugin-cache-route

# 执行初始化命令
$ umi keepalive

1
2
3
4

在配置中使用

export default {
  plugins: [
    [
      "umi-plugin-cache-route",
      {
        keepalive: ["route path", "route path"]
      }
    ]
  ]
};

1
2
3
4
5
6
7
8
9
10

路由配置

配置式路由

直接在路由配置的时候，写明 keepAlive: true

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

约定式路由

直接配置 keepalive 属性

export default {
  plugins: [
    [
      "umi-plugin-cache-route",
      {
        keepalive: ["/list"]
      }
    ]
  ]
};

1
2
3
4
5
6
7
8
9
10

清除路由

被标记 keepAlive: true 和被配置 keepalive:['/list'] 的路由都会被一直保持，你可以在你觉得不需要的时候，使用 dropByCacheKey 手动解除

import { dropByCacheKey } from "umi";

export default () => {
  const clearCache = () => {
    dropByCacheKey("/list");
  };
  return (
    <Card>
      <Button onClick={clearCache}>clear list page cache</Button>
    </Card>
  );
};

1
2
3
4
5
6
7
8
9
10
11
12

参考资源

← 部署腾讯地图 →

# Keep Alive

# 安装

# 路由配置

# 配置式路由

# 约定式路由

# 清除路由