一文说清如何使用keepalive实现页面缓存-（已上线）

需求场景：前进刷新后退不刷新，且后退返回到跳转前的位置，使用keepalive可以完美实现这个需求。

前置知识

keepalive官方介绍，可查看链接补充基础知识, 看完文档我们基本可以知道，第一次进入页面渲染时会走created->activated, 回退时走activated不再走created。因此我的操作是：

1. 前进时数据处理放在created, 后退时的数据处理放在activated；
2. 又因为前进后退都走了activated函数，所以在beforeRouteEnter路由守卫的时候加一个标记（isBack）来判断是否从其他页面回退的；
3. 后退返回到跳转前的位置用路由参数中的 scrollBehavior。
   

实现过程

在app.vue中的处理，

tip: 需要缓存的页面的组件的name和router的name要一致，组件和router配置都要写上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在router中的处理

需要缓存的页面在mete中加上keepalive

  {
    path: "/***",
    name: "AAA",
    component: () => import("@/***"),
    meta: {
      title: "****",
      keepAlive: true,
    },
  },
1
2
3
4
5
6
7
8
9
10

scrollBehavior中处理

const router = new Router({
   
  routes: [
    {
   
      path: "/",
      red
1
2
3
4
5
6