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不知后续还会不会出问题…
网友评论