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:
      '列表'        
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },