vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

//第一种：直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
 
//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="ReportA，ReportB"
      <keep-alive include="ReportA">
         <component :is="comName"></component> 
      </keep-alive>
 
//第三种：include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['ReportA']">
         <component :is="comName"></component>
      </keep-alive> 
 
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
      <keep-alive exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
 
 
//特殊情况：若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="ReportA,ReportB" exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
	  <keep-alive exclude="c" max="5">
	     <component />
	  </keep-alive>

//主页面
<template>
      <keep-alive include="ReportA,ReportB">
        <component :is="comName" > </component>
      </keep-alive>
</template>
<script>
import ReportA from './components/reportA.vue'
import ReportB from './components/reportB.vue'
export default {
  components: {
    ReportA,
    ReportB,
  },
}
</script>

<script>
export default {
  name: 'ReportA',    //需要默认输出的名字（两个页面都要）
}
</script>

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要缓存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要缓存
    },
    component: () => import('../views/Banner.vue')
  }

    //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
 
    //此处是为添加了keepAlive=false 的路由默认不缓存
      <router-view v-if="!$route.meta.keepAlive"/>