使用VUE监听网页关闭并执行退出操作

Gua_guagua

已于 2022-10-12 10:10:47 修改

阅读量1.6w

点赞数 8

文章标签： vue.js javascript 前端

于 2021-12-12 20:07:39 首次发布

本文链接：https://blog.csdn.net/Gua_guagua/article/details/121892495

版权

本文介绍了在Vue.js项目中如何监听页面关闭事件，展示关闭提示框并在页面卸载时执行同步的退出登录操作。通过在`mounted()`中添加`beforeunload`和`unload`事件监听，`beforeunloadHandler`用于显示提示，`unloadHandler`调用异步处理方法`handleGoLog`。同时，在`destroyed()`中移除事件监听，确保资源释放。

摘要由CSDN通过智能技术生成

最近在项目中遇到了一个需求，需要监听页面关闭，在页面关闭时弹出提示框，并在离开页面时触发退出操作。因为是用VUE进行开发的，所以先在mounted()中创建页面关闭的监听

window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));

第一个监听的是页面关闭之前，对应的方法可以写做

// 页面关闭之前，触发提示框
    beforeunloadHandler(e) {
      if (e) {
        e = e || window.event;
        console.log(e);
        if (e) {
          e.returnValue = "关闭提示";
        }
        return "关闭提示";
      }
    },

第二个监听的是页面关闭的时候，这里面可以调用退出登录的方法，但是记得要用同步调用的方法，axios默认的是异步调用的方法

// 页面关闭
    async unloadHandler(e) {
      // 退出登录
      await this.handleGoLog();
    },

最后记得在destroyed()中，注销监听

destroyed() {
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },