vue 关于keep-alive的使用

参考文档：keep-alive

在这里我具体说说自己在项目中的使用,我采用的是$route.meta.keepAlive的方式来实现路由切换时,页面的缓存

这种方式 可以 很好的 区分控制 是否需要缓存的页面

• App.vue里面使用keep-alive,如下

<template>
  <div id="app">
        <keep-alive>
            <--! 需要缓存的-->
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <transition enter-active-class="slide-forward" leave-active-class="slide-back">
            <--! 不需要缓存的-->
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
    
  </div>
</template>

 

注意:我在不需要缓存的router-view上面加了transtion动画效果,但是在需要缓存的路由上面并没有加,因为router-view和transtion都是虚拟的DOM都不会被渲染在页面上,如果你给需要缓存的加上动画效果的标签,你会发现页面一样会刷新,并没有达到缓存的效果
其实官方说明里面也有提到这一点,是缓存不活动的组件,当然你如果非得要给组件加上动画效果,你可以在单独的组件上面去加,这样子也是不影响缓存的

• 用法

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是去销毁他们。和<transition>相似，<keep-alive>是一个抽象的组件：它自身不会渲染DOM元素，也不会出现在父组件链中。

官方说明

• router/index.js里面做配置 将属性这样设置即可keepAlive: true

{
      path:'/partManagement',
      name:'PartManagement',
      component : resolve => require(['@/components/pages/PartManagement'] , resolve),
      meta:{
        requireAuth : true,
        keepAlive: true,        
        pageTitle:'列表'        
      }
    },

补充：

• keep-alive的生命周期

1. activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2. deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

     keep-alive属性

1. include 字符串或正则表达式，只有名称匹配的组件会被缓存
2. exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
3. max 数字，最多可以缓存多少组件实例

<keep-alive include="test-keep-alive">
//将缓存name为test-keep-alive的组件
    <component></component>
</keep-alive>


<keep-alive include="a,b">
//将缓存name为a或者b的组件，结合动态组件使用
    <component :is="view"></component>
</keep-alive>



<keep-alive :include="/a|b/">
//使用正则表达式，需使用v-bind
    <component :is="view"></component>
</keep-alive>


<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>



<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

 

include以及结合vuex的使用

（1）、vuex文件里

（2）、App.vue

（3）、具体文件使用