美文网首页
VUE去哪儿网教程中的keep-alive exclude="D

VUE去哪儿网教程中的keep-alive exclude="D

作者: 文朝明 | 来源:发表于2020-01-14 22:03 被阅读0次

VUE去哪儿网教程中的APP.vue:

<keep-alive exclude="Detail">
  <router-view/>
</keep-alive>


当添加:exclude="Detail"之后,detail中的header:

activated () {
  window.addEventListener('scroll', this.doScroll)
}
deactivated () {
  window.removeEventListener('scroll', this.doScroll)
}


会失效,渐隐渐现的header无法出现,后来发现那个老师的源码中改成了:

<keep-alive exclude="Detail">
  <router-view/>
</keep-alive>

但是改成这个之后detail页面实现了头部的渐隐渐现,在doScroll()方法中添加console.log(‘scroll’);发现回到首页,其实 window.removeEventListener(‘scroll’, this.doScroll)事件并没有被销毁,滚动时,控制台仍能输出‘scroll’,vue官网上也并没有找到unmounted()函数。

   mounted () {
      window.addEventListener('scroll', this.doScroll)
    }
    destroyed () {
     console.log("destroyed")
      window.removeEventListener('scroll', this.doScroll)
    }


当点击头部返回按钮或者浏览器返回按钮后回到首页,控制台会打印出destroyed,同时remove了全局scroll事件

目前验证可用,初学VUE不知后续还会不会出问题…

相关文章

网友评论

      本文标题:VUE去哪儿网教程中的keep-alive exclude="D

      本文链接:https://www.haomeiwen.com/subject/qzczactx.html