keep-alive和router-view配合使用

keep-alive大多数可能了解过，它是vue的内置组件，可以将包裹的组件进行缓存，避免重复的渲染和销毁，当这个组件再次被使用的时候，它会从缓存中提取出来并重新挂载到页面上，keep-alive提供了两个钩子函数：actived,deactived，keep-alive还提供了一些配置属性：max,min,exclude,include，流程为：
1.判断组件name,不在include或在exclude中，则返回Vnode，说明该组件不被缓存
2.获取组件实例key，如果有获取的实例key，否则重新生成
3.key生成规则：cid+‘::’+tag,仅仅靠cid是不够的，因为相同构造函数可以注册为不同的本地组件
4.如果缓存对象存在，则直接从缓存对象中获取组件实例给vnode，不存在则添加到缓存对象中
5.最大缓存数量：当缓存数量超过max值时，清除key数组内的第一个组件（最近最少使用缓存淘汰算法，通过cache数组缓存所有组件vnode实例，当cache内原有组件被使用时会将该组件key从keys数组中删除，然后push到keys数组最后，以便清除最不常用组件）
keep-alive本身创建过程和patch过程，缓存渲染的时候，会根据vnode.componentInstance(首次渲染为undefined)和keepAlive属性abstract判断会不会执行created，mounted等钩子函数，而是对缓存的组件执行patch过程，直接把缓存的DOM对象直接插入到目标元素中，完成了对数据更新下的渲染过程

第一种方法是监听路由变化，获取到路由名称是否缓存

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="name === 'Home'"></router-view> // 将对应名字的缓存
    </keep-alive>
    <router-view v-if="name === 'About'"></router-view>
  </div>
</template>
<script>
import { watch } from 'vue'
export default {
  data() {
    return {
      name: '', // 用来保存路由名称
    }
  },
  watch: {
    $route: {
      // 监听路由变化
      handler(newVal, oldVal) {
        console.log(newVal)
        this.name = newVal.name
      },
      immediate: true, // 开启立即监听
    },
  },
}
</script>

第二种通过在路由配置文件中给需要添加缓存的页面配置路由信息添加属性来判断

// router里index.js里配置
const routes = [
    {
        path: '/',
        name: 'Home',
        component: 'Home',
        meta: {
        isSave: true, // 我们可以要在缓存的路由中随便添加一个属性作为标志
        },
    },
    {
        path: '/',
        name: 'About',
        component: 'About',
        meta: {
            isSave: false, // 我们可以要在缓存的路由中随便添加一个属性作为标志
        },
    }
]
const router =new VueRouter({
    routes
})
export default

在vue中
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$router.meta.isSave === true"></router-view> 
    </keep-alive>
    <router-view v-if="$router.meta.isSave === false"></router-view>
  </div>
</template>
<script>

第三种：直接使用keep-alive自带属性的include和exclude

<template>
  <div id="app">
    <!-- :include='/componentA|componentB' 正则写法 -->
    <!-- :include="['componentA','componentB']" 数组写法 -->
    <keep-alive include="About"> // 直接缓存我们需要缓存的路由名
      <router-view></router-view>
      将对应名字的缓存
    </keep-alive>
  </div>
</template>