使用keep-alive缓存失活组件数据，返回旧页面时数据不变_keep-alive缓存的组件部分数据丢失

使用keep-alive

1、在项目的App.vue文件中添加keep-alive

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <!-- <router-view/> -->
      <!--缓存想要缓存的页面，实现后退不刷新-->
      <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </a-config-provider>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

2、在需要缓存数据的页面中加入钩子函数

beforeRouteEnter (to, from, next) {
  to.meta.keepAlive = true
  next(0)
},
1
2
3
4

钩子函数的执行顺序

• 不使用keep-alive
  beforeRouteEnter --> created --> mounted --> destroyed
• 使用keep-alive
  beforeRouteEnter --> created --> mounted --> activated --> deactivated
  再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。
  created和mounted不会再执行。