一、什么是keep-alive

根据vue官方的话来说，就是keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。一般用法为下

<template>
   <!-- 缓存 -->
  <keep-alive>
    <router-view />
  </keep-alive>

</template>

二、keep-alive的局限有哪些

但是直接这样用的话，他会把所有route-view包裹下的组件全部缓存起来。对于大一点的项目来说，性能消耗可想而之，所以我们改进了一下

<template>
  <!-- 缓存 -->
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
  </keep-alive>

  <router-view v-if="!$route.meta.keepAlive"/>

</template>

路由配置如下

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'login',
    component: () => import('@/views/login/login.vue'), // 建议进行路由懒加载，优化访问性能
    meta: { title: '登陆', icon: 'ziyuanku' ,keepAlive:true},
  },
  {
    path: '/page',
    name: 'page',
    redirect:'page/index',
    component: Layout ,// 建议进行路由懒加载，优化访问性能
    meta: { title: '首页', icon: 'ziyuanku' ,keepAlive:false},
    children:[
      {
        path:'/page/index',
        component: () => import('@/views/page/index.vue'), // 建议进行路由懒加载，优化访问性能
        meta: { title: '首页', icon: 'ziyuanku' },
      }
    ]
  },
]

这样一来，我们就可以选择性的指定哪些组件需要缓存了哪些不需要了。但是还是有个问题，就是这样的话这个整个页面会一直保持缓存，页面也不会重新加载了。如果我们只需要特定的时候缓存呢？那就要用到我下面的方案了。

三、怎么实现动态缓存

首先，我们知道keep-alive支持三个属性，分别是

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

这里我们用到的是include属性，就是把要缓存的组件写成一个数组放到里面，也可以用字符串的形式。但要注意在组件内写上name，不能是匿名组件，否则不会生效。

<template>
  <!-- 缓存 -->
  <keep-alive :include="keepList">
    <router-view />
  </keep-alive>


</template>


<script>
  export default {
  name: 'AppMain',
  data() {
    return {
      keepList:['login']
    }
  },
 }
</script>

现在我们把login页面缓存起来了，接下来想办法把他销毁掉。我用的是watch监听路由的方式

watch: {
    $route(to,form){
      if(to.name == 'login'){
        this.keepList = ['login']
      }else{
        this.keepList = []
      }
      console.log(this.keepList);

    } 
 }

这样我们就在进入另一个页面home的时候把缓存清空了。同理，我们可以添加多个同级路由缓存，只要把需要缓存的路由用管道符号（||） 的方式拼起来就行了，那样就只在home页面和detail页面是缓存home页面了。

watch: {
    $route(to,form){
      if(to.name == 'detail' || to.name == 'home'){
        this.routeList = ['home']
      }else{
        this.routeList = []
      }
      console.log(this.routeList);

    } 
  }

怎么样？是不是很简单，希望可以帮到你🙂