在一些项目支付页中,有些用户因价格不太满意等导致成交失败,点击返回键退出页面,这个时候可以通过监听用户返回动作来触发某些事件,比如弹出红包优惠等等。
// 判断设备是否支持
mounted() {
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener("popstate", this.goBack, false);
console.log("支持");
}
}
methods: {
// 该方法就是用户点击返回所触发的方法
goBack() {
// 执行代码...
},
}
beforeDestroy() {
// 页面销毁时,取消监听。否则其他vue路由页面也会被监听
window.removeEventListener("popstate", this.goBack, false);
},
注意:如果用户连续点击两次返回键,还是会返回上一级页面
如果用于返回跳过过渡页面,谨防返回死循环