vue使用navigator.sendBeacon实现移动端记录页面浏览时长

使用navigator.sendBeacon方法记录Vue项目中的页面浏览时长的步骤如下：

1.在Vue组件中，使用mounted钩子函数来设置进入页面的时间。

mounted() {
  this.enterTime = new Date();
  // 其他代码...
},

2.根据设备类型（iOS或其他设备），添加相应的事件监听器。如果是iOS设备，使用pagehide事件监听器；否则，使用unload事件监听器。

mounted() {
  // 其他代码...
  let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isiOS) {
    window.addEventListener("pagehide", this.recordEvent);
  } else {
    window.addEventListener("unload", this.recordEvent, false);
  }
},

3.在recordEvent方法中计算页面浏览时长，构造发送给服务器的数据，使用navigator.sendBeacon方法发送数据。

methods: {
  recordEvent() {
    this.leaveTime = new Date();
    let diff = this.leaveTime - this.enterTime;
    let pageTime = Math.ceil(diff / 1000); // 毫秒转换为秒
    let data = {
      transId: sessionStorage.transId, // 分享id
      pageTime, // 页面浏览时长
    };
    let params = new FormData();
    params.append("sisEventInfoDto", JSON.stringify(data));
    navigator.sendBeacon(`${API_URL}/common/event/recordEvent`, params);
  },
},

4.在beforeDestroy钩子函数中调用recordEvent方法，以确保在组件销毁之前记录最后的页面浏览时长。

beforeDestroy() {
  this.recordEvent();
},

以上代码示例中，API_URL是记录事件的接口URL，你需要根据实际情况进行替换。