vue Keep-alive组件缓存的简单使用代码

<template>
 <div>
    <div>
      <button @click="flag='testA'">A组件</button>
      <button @click="flag='testB'">B组件</button>
      <component :is="flag"></component>
    </div>
 </div>
</template>
 
<script>
import testA from './testA'; 
 
export default {
  data(){
    return{
      flag:'testA'
    }
  },
  methods:{
 
  },
  components:{
    testA,
   'testB': () => import('./testB') 
  }
}
</script>

//第一种：直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="flag"></component>
    </keep-alive>
 
//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="testA，testB"
      <keep-alive include="testA">
         <component :is="flag"></component> 
      </keep-alive>
 
//第三种：include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['testA']">
         <component :is="flag"></component>
      </keep-alive> 
 
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
      <keep-alive exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 
 
 
//特殊情况：若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="testA,testB" exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 

{
    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"/>