Vue的缓存坑

起步

在路由中添加meta

{
      path: '/demo',
      name: 'demo',
      component: resolve=>require(["@/pages/demo/demo"],resolve),
      meta:{
        keepAlive:true,
        isUseCache: false
      }
}

在标签中添加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('函数名'，执行代码)