keep-alive

参考文章: https://www.cnblogs.com/goloving/p/9256212.html

概念

1. <keep-alive>`是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
2. <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
3. <keep-alive>与<transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在this.$parent中找不到keep-alive` 。

应用

1. 在app.vue中添加keep-alive

<template>
  <div class="pb-60">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2. 在router的meta中给需要缓存的组件添加keepAlive

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