vue keep-alive include router页面缓存

1 介绍

• <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
  <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
  例子1

  <keep-alive :include="['basicInfo', 'infoWarning' ,'dynamic']">
      <router-view />
   </keep-alive>

prop:
* include: 字符串或正则表达式。只有匹配的组件会被缓存。
* exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

例子2

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

prop:
* include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存
* exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

2 利用meta属性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false, //不需要被缓存的组件
     xxx:xxx		  //可以自定义参数,通过 this.$router.meta.xxx获取		
 } 
]

<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->