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
