在我们用vue开发的过程中,难免会遇到这样的需求:在页面刷新的时候改变一些东西(为啥要改东西,这个还真没法说)。这个时候我们肯定会想用beforeDestory来进行监听,但是真的可以有用吗?我们来试下
beforeDestroy() {
console.log("进入beforeDestory");
}
那么我们在控制台看下
空白,说明根本没有执行,那么我们应该怎么办呢?
首先我们回顾下js加载以及卸载事件
1:页面加载时只执行 onload 事件。
2:页面关闭时,先 onbeforeunload 事件,再 onunload 事件。
3:页面刷新时先执行 onbeforeunload 事件,然后 onunload 事件,最后 onload 事件。
所以我们可以通过监听beforeunload来进行判断页面是否刷新,因此我们在页面created的时候将beforeunload进行监听,在页面
destroyed的时候将监听释放掉。这样避免出现多出调用
所以有了以下代码
created() {
window.addEventListener("beforeunload", e => this.beforeunloadFn(e));
},
methods:{
beforeunloadFn() {
console.log(‘测试刷新’);
}
},
destroyed() {
window.removeEventListener("beforeunload", e => this.beforeunloadFn(e));
},
注意:由于移动端对onbeforeunload 是无法监听的,所以要通过以上方法监听是不可取的