vue监听物理返回键事件

原创已于 2022-08-28 16:21:08 修改 · 1.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

于 2022-08-22 17:32:48 首次发布

本文介绍了如何在用户离开页面时通过监听返回键触发事件，如显示优惠，以提高交易成功率。当用户点击返回键，执行特定代码，如弹出红包优惠，以挽留用户。同时提醒注意防止返回死循环，并在页面销毁时取消监听，确保用户体验。

在一些项目支付页中，有些用户因价格不太满意等导致成交失败，点击返回键退出页面，这个时候可以通过监听用户返回动作来触发某些事件，比如弹出红包优惠等等。

// 判断设备是否支持
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);
 },

注意：如果用户连续点击两次返回键，还是会返回上一级页面

如果用于返回跳过过渡页面，谨防返回死循环