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的内容就是这些了
