router 配置缓存

第一步：配置 App.vue

Vue2.x 与 Vue3.0 的 App.vue 配置有差异，在 App.vue 配置信息如下：

Vue2.x 中，router-view 可整个放入 keep-alive 中，如下：

<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>

这里 component 是 vue 中的特殊组件，:is 是用来绑定指定组件，这里是与路由对应的页面绑定。

第二步：添加 meta 属性

在对应的路由上添加meta属性来设置页面是否要使用缓存，如下：

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

到此即可实现页面的简单缓存，但是有些场景需要做复杂处理，比如说页面部分信息不需要读缓存，每次进入都需要进行处理，这个时候我们就可以使用 activated 生命周期来解决页面部分刷新问题。

实现页面部分刷新

先了解 vue 的生命周期，被 keepAlive 包裹的组件和页面，页面进入时执行的生命周期为：created->mounted->activated;

其中 created->mounted 是页面第一次进入才会执行，activated 生命周期在页面每次进入都会执行，特属于 keepAlive 的一个生命周期，所以我们把页面每次进来要进行的操作放入该生命周期即可。

如下代码：

activated() {
   // 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';
},

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

动态设置路由 keepAlive 属性

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

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

组件配置缓存

使用场景

通常我们会对 vue 的一个页面进行缓存，然而有些时候我们仅需要缓存页面的某一个组件，或是在使用动态组件 compnent 进行组件切换时需要对组件进行缓存。

缓存页面指定组件

当用于 App.vue 时，所有的路由对应的页面为项目所对应的组件，使用方法如下：

在 keep-alive 组件上使用 include 或 exclude 属性，如下：使用 include

代表将缓存 name 为 testKA 的组件，

<!-- App.vue 文件，将页面作为组件缓存 <router-view v-slot="{ Component }"> -->
<keep-alive include="testKA”>
	<component :is="Component"/>
</keep-alive>
</router-view>

在router对应的页面中，需要设置name属性，如下：

export **default** {
	name: 'testKA', // keep-alive中include属性匹配组件name
  data() { **return** {} },
  activated() {
	  // keepAlive 缓存的页面每次进入都会进行的生命周期
  },
}

此外，include用法还有如下：

<!-- 逗号分隔字符串 -->
<keep-alive **include**="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :**include**="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :**include**="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

exclude 用法与 include 用法相同，代表不被缓存的组件。此外，keep-alive 还有一个 max 属性，代表缓存组件最大数量，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

当用于某个页面进行组件切换时，用法与缓存路由相同，不过只是将页面降级为一个组件，父组件由 App.vue 降级为对应路由页面。

总结

在实战过程中，发现 keepalive 缓存组件时，不能跨级使用；比如在 App.vue 中使用 include 属性进行 name="a" 匹配时，只能匹配缓存 name 为 a 的子组件（路由页面），而不能缓存 name 为 "a" 的孙子组件（子页面引的组件）。

若想缓存孙子组件，可以将整个子组件缓存，或者在子组件里再使用 keepalive 。关于 keepalive 使用说明文档，可去官网学习：

KeepAlive | Vue.js