使用keepalive针对页面缓存的一些问题的解决方法

场景介绍

在项目前端设计中有一个需求，需要跳转到其他页面先拿到数据，再返回到原界面，但是原界面填写的数据会被刷新，因此在这个地方需要对页面的数据进行缓存

需求分析

项目使用的是Vue3，对于页面缓存，在网上搜索后锁定了 keepAlive 做缓存

简介

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。 （VNode：虚拟DOM，其实就是一个JS对象）

使用

参数

配置App.vue vue2.x与vue3.0的App.vue配置有差异，在App.vue配置信息如下： vue2.x中，router-view可整个放入keepalive中，如下：

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>

vue3.0的App.vue配置方法如下：

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

添加meta属性，针对需要缓存的页面，将keepAlive属性设置为true，否则为false

实现页面部分刷新 先了解vue的生命周期，被keepAlive包裹的组件和页面，页面进入时执行的生命周期为：created->mounted->activated; 其中created->mounted是页面第一次进入才会执行，activated生命周期在页面每次进入都会执行，特属于keepAlive的一个生命周期，所以我们把页面每次进来要进行的操作放入该生命周期即可。 如下代码：

activated() {
	//---代码块---//
},

实现的功能是用户每次进入将动态验证码设为空，实现此功能也可以用其他方式，比如说将该组件放缓存外（参见2、component配置缓存）。

4）动态设置路由keepAlive属性 有些时候我们用完了keepalive缓存之后，想让页面不再保持缓存，或者设置下一个页面keepalive，也这个时候我们可以改变meta的keepAlive值来去除页面缓存，使用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，使用方式如下：

// to为即将跳转的路由，from为上一个页面路由
beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();
}

详细情况可以参考（https://blog.csdn.net/m0_46309087/article/details/109403655）

对于钩子函数onActivated，详细可以参考（https://blog.csdn.net/m0_64494670/article/details/128597109）

注：

关于Vue+Vite项目打包dist文件后使用Hbuilder的5+APP进行APK文件封装后无法显示页面的问题解决方法：

在项目根目录下默认生成的vite.config.js文件当中添加base:'./'