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

这里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.don.inputValue = '';
}

keepalive缓存组件时，不能跨级使用，子页面引的组件不能被缓存，需单独设置keepalive。