vue 监听页面关闭掉接口

在 Vue 中，可以使用 `beforeUnload` 事件来监听页面关闭事件，然后在该事件处理函数中调用关闭接口。具体实现代码如下：

export default {
  data() {
    return {
      // 保存关闭接口请求是否发送的状态
      closing: false
    }
  },
  mounted() {
    // 监听 beforeunload 事件
    window.addEventListener('beforeunload', this.handleBeforeUnload)
  },
  beforeDestroy() {
    // 移除 beforeunload 事件监听
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
  },
  methods: {
    handleBeforeUnload(event) {
      // 如果关闭接口请求已经发送，则直接返回
      if (this.closing) {
        return
      }
      
      // 发送关闭接口请求
      this.closing = true
      this.$http.post('/api/close').then(() => {
        // 关闭接口请求发送成功，页面可以关闭了
        this.closing = false
      }, () => {
        // 关闭接口请求发送失败，阻止页面关闭
        event.preventDefault()
      })
      
      // 返回提示信息
      event.returnValue = '确定离开当前页面吗？'
    }
  }
}

在上面的代码中，我们在 Vue 组件的 `mounted` 钩子函数中监听 `beforeunload` 事件，并在 `beforeDestroy` 钩子函数中移除事件监听。在 `handleBeforeUnload` 方法中，我们首先判断关闭接口请求是否已经发送，如果已经发送，直接返回。否则，我们发送关闭接口请求，并在请求成功时将 `closing` 状态设置为 `false`，表示关闭接口请求已经发送成功。如果请求失败，则阻止页面关闭。最后，我们设置 `event.returnValue` 属性为提示信息，以触发浏览器的提示框。