当前位置：首页 > news >正文

Vue 记录用户进入页面的时间、离开页面的时间并计算时长

news 来源：原创 2025/5/23 13:48:27

在 Vue 项目中，要记录用户进入页面的时间、离开页面的时间，并在用户离开时计算时长并调用后端接口，可以借助 Vue 的生命周期钩子和浏览器的一些事件来实现。以下是具体的实现步骤和示例代码：

实现思路

记录进入时间：在 Vue 组件的 created 或者 mounted 钩子函数中记录用户进入页面的时间。
记录离开时间并计算时长：利用 beforeDestroy 钩子函数（适用于正常切换路由离开页面）和 window 对象的 beforeunload 事件（适用于用户直接关闭窗口或浏览器）来记录用户离开页面的时间，并计算用户在页面停留的时长。
调用后端接口：将计算得到的时长发送给后端接口。

示例代码

<template>
  <div>
    <!-- 页面内容 -->
    <h1>这是示例页面</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      enterTime: null, // 进入页面的时间
      leaveTime: null, // 离开页面的时间
      duration: null, // 页面停留时长
    };
  },
  mounted() {
    // 记录进入页面的时间
    this.enterTime = new Date().getTime();
    // 监听 window 的 beforeunload 事件
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    // 移除 beforeunload 事件监听器
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    // 正常切换路由离开页面时计算时长并调用后端接口
    this.handleLeavePage();
  },
  methods: {
    handleBeforeUnload() {
      // 用户直接关闭窗口或浏览器时计算时长并调用后端接口
      this.handleLeavePage();
    },
    handleLeavePage() {
      // 记录离开页面的时间
      this.leaveTime = new Date().getTime();
      // 计算页面停留时长（单位：毫秒）
      this.duration = this.leaveTime - this.enterTime;
      // 调用后端接口发送时长数据
      this.sendDurationToBackend();
    },
    async sendDurationToBackend() {
      try {
        // 这里使用 fetch 作为示例，实际项目中可以使用 axios 等工具
        const response = await fetch('your_backend_api_url', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            duration: this.duration,
          }),
        });
        if (response.ok) {
          console.log('时长数据发送成功');
        } else {
          console.error('时长数据发送失败');
        }
      } catch (error) {
        console.error('请求出错:', error);
      }
    },
  },
};
</script>

代码解释

data 属性：
- enterTime：用于记录用户进入页面的时间。
- leaveTime：用于记录用户离开页面的时间。
- duration：用于记录用户在页面停留的时长。
mounted 钩子函数：
- 记录用户进入页面的时间。
- 监听 window 对象的 beforeunload 事件，当用户直接关闭窗口或浏览器时触发。
beforeDestroy 钩子函数：
- 移除 beforeunload 事件监听器，防止内存泄漏。
- 调用 handleLeavePage 方法计算时长并调用后端接口。
handleBeforeUnload 方法：
- 当用户直接关闭窗口或浏览器时，调用 handleLeavePage 方法计算时长并调用后端接口。
handleLeavePage 方法：
- 记录用户离开页面的时间。
- 计算用户在页面停留的时长。
- 调用 sendDurationToBackend 方法将时长数据发送给后端。
sendDurationToBackend 方法：
- 使用 fetch API 向后端接口发送时长数据。
- 根据响应结果输出相应的日志信息。

注意事项

请将 'your_backend_api_url' 替换为实际的后端接口地址。
在实际项目中，建议使用 axios 等成熟的 HTTP 请求库来发送请求。
由于浏览器的安全限制，在 beforeunload 事件中使用异步请求可能无法保证请求一定会发送成功，你可以考虑使用同步请求或者在 unload 事件中结合 navigator.sendBeacon 方法来发送数据。