起步
在路由中添加meta
{
path: '/demo',
name: 'demo',
component: resolve=>require(["@/pages/demo/demo"],resolve),
meta:{
keepAlive:true,
isUseCache: false
}
}
在标签中添加keep-alive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
与缓存相关的生命周期函数
activated
需要将created和mounted请求方法放在该钩子函数中
因为刚进入页面会执行一次,之后执行的就是activated中的方法
deactivated 清除缓存
deactivated () { //清除keep-alive的缓存
console.log('清除keep-alive的缓存')
this.$destroy(true)
}
//谨慎使用,因为使用缓存后,destroyed的调用不再生效,无法清除数据
与缓存 配合的路由函数
beforeRouteLeave (to, from, next) {
console.log(to)
if(to.name!='myMap2') {
this.$destroy(true)
}
next();
}// 根据逻辑清除缓存数据
其他组件传值接受第一次在created或者mounted中
使用this.bus.$on('函数名',执行代码)