keep-alive是vue自带的一个标签，用keep-alive包裹的组件，在这个组件不活动时，vue会自动缓存这个组件，而不是销毁它，
举一个例子

  <div>
    <div>
      <button @click="showAdd = !showAdd">点击切换显示</button>
    </div>
    <keep-alive>
      <add-hero v-if="showAdd"></add-hero>
      <hero-list v-else></hero-list>
    </keep-alive>
  </div>

在showAdd的值变化时，add-hero和hero-list两个组件进行切换，
因为有keep-alive标签包裹，不显示的组件不会被销毁，vue把它缓存了起来，
在vue开发者工具中可以看出来

这时add-hero这个组件没有显示，在开发者工具里显示是灰色，后面inactive表示是非激活态

对比一下不用keep-alive的情况

在add-hero这个组件不显示时，在开发者工具的组件树里根本没有这个组件。

使用vue-router时，切换页面时缓存页面

我们之前在学习vue-router时，给每个路由都写了meta，里面写了keepAlive，现在是用它的时候了，

  {
    path: '/',
    component: () => import('./views/index'),
    name: 'index',
    meta: {
      title: '首页',
      keepAlive: true,
    },
  },

打开我们之前学习vue-router时写的项目，这次主要修改集中在App.vue中，更改<router-view>标签
跟之前vue2时候写法区别比较大
现在要把keepAlive写在router-view里面，使用作用域插槽获得页面组件

  <router-view v-slot="slotProps">
    <keep-alive>
      <component :is="slotProps.Component"></component>
    </keep-alive>
  </router-view>

这样就相当于缓存了所有页面
slotProps其实是一个对象，所以也可以用对象解构的语法

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

这样写简洁一点

下一步就要用上我们meta里面配置的keepAlive

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

按照更vue2类似的写法，根据keepAlive来判断，是true的话，使用keep-alive标签里面的组件
是false的话使用keep-alive标签外面的组件
但是点击跳转时却报错了

然后根据网上的解决办法，给它们加上key，key是唯一不重复的，那我们之前写的name属性就派上用场了

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></component>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name">></component>
  </router-view>

现在就实现了页面跳转缓存，并且在router.js中配置就可以控制了

还有一个种方式就是使用keep-alive标签的include属性
原文：https://www.jianshu.com/p/b324bdd73556

<template>
  <div>vue-router小例子</div>
  <div>router-link</div>
  <router-view v-slot="{ Component }">
    <keep-alive :include="KeepAliveList">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
</template>

<script>
export default {
  name: 'App',
  data() {
    return { KeepAliveList: [] }
  },
  watch: {
    $route(to) {
      //监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中
      if (to.meta.keepAlive && this.KeepAliveList.indexOf(to.name) === -1) {
        this.KeepAliveList.push(to.name)
      }
    },
  },
}
</script>

<style></style>

这样写好像更优雅一点
这个方法有一点需要注意一下，keep-alive标签的include属性是根据组件的name判断的，所以index.vue和list.vue等页面vue文件里一定要写上名字，并且与router.js中使用的name一样
比如index.vue，定义name是index

<template>
  <div>这里是首页</div>
  <router-link to="/list">点击跳转到列表页</router-link>
  <button @click="onClick">点击跳转到列表页</button>
  <input type="text" />
</template>

<script>
export default {
  name: 'index', // 新增
  methods: {
    onClick() {
      // 逻辑
      this.$router.push('/list')
    },
  },
}
</script>

<style></style>

页面缓存后，再次进入页面，那么它的mounted之类的生命周期函数是不会再次调用的，
这时候可以取消页面缓存，就是把这个页面配置meta时，把keepAlive设置为false
还有一种方式可以监听路由的变化，

  watch: {
    '$route.path': {
      handler(newVal) {
        console.log(newVal)
        console.log('页面跳转了')
      },
    },
  },

这样缓存后，再次进页面就会触发侦听，就可以根据this.$route判断，然后做一些操作
关于keepAlive的内容就是这些了