vue 的keep-alive的使用

vue官方推荐了几种使用方法,可也看看link
我具体说说自己在项目中的使用,我采用的是$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都不会被渲染在页面上,如果你给需要缓存的加上动画效果的标签,你会发现页面一样会刷新,并没有达到缓存的效果
其实官方说明里面也有提到这一点,是缓存不活动的组件,当然你如果非得要给组件加上动画效果,你可以在单独的组件上面去加,这样子也是不影响缓存的

官方说明

• router/index.js里面做配置

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

将属性这样设置即可keepAlive: true