vue 管理系统关闭页面/浏览器/关闭tag实现发送请求_vue3在浏览器标签关闭后调用-优快云博客

本文链接：https://blog.youkuaiyun.com/Kerwin__li/article/details/130334913

文章讲述了在编辑页面中，点击取消时如何确保向服务器发送状态更改请求，以解锁库位。通过创建event-bus来协调页面间的通信，保证在组件销毁时更新状态并通知返回的页面。此外，还介绍了如何在用户强制关闭浏览器时调用接口更新状态，使用beforeunload事件监听浏览器关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

当点击编辑按钮会跳转到编辑页面中，于此同时会向服务器发送接口，来告知服务器这个库位已经被锁定了，其他人不可以修改。

当取消操作后会向服务器发送请求，告知服务器状态发生更改了，不需要锁定了

问题

点击取消去调用接口然后等待后端将这个单据的改变后进行页面调整是没有问题的

cancel(flag) {
   this.reset();
   // 发送请求
   editStatusInventoryData(this.currentId, 0).then(response => {
       // 关闭tag并且返回上层页面
       this.closeSelectedTag(this.$route)
       this.$tools.clearCacheAndGo(this,'inventoryData')
   })
}

1、当用户点击tag进行关闭的时候，请求是发送不过去的，仍然是没办法更换状态

直接在beforeDestroy中请求时不合理的，可能会在服务器更新之前返回，返回后状态仍然是锁定的，所以说是不合理的。

解决办法：

新建event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

在组件销毁的时候，请求接口，并在请求结束后向返回的页面发送事件

  beforeDestroy(){
    editStatusInventoryData(this.currentId, 0).then(response => {
      EventBus.$emit('close')
      this.reset();
    })
  },

在返回的页面中监听这个事件即可

  activated() {
    this.getList();
    // 避免因取消编辑操作关闭页面 导致锁定状态未能及时刷新
    EventBus.$on("close", () => {
      this.getList();
    });
  },

现在就可以在详情页面中调用改变状态的接口后再更新返回页面的list了 ~

2、当用户强制关闭浏览器也是无法更变状态

关闭浏览器就发送请求改变状态即可

在详情页面中监听即可

  mounted() {
    // 监听浏览器关闭，需要更新状态
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  destroyed(){
    // 取消监听
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },

  methods: {
    // 浏览器关闭 调用接口改变状态
    beforeunloadHandler(){
      editStatusInventoryData(this.currentId, 0).then(response => {})
    },
  }