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

在 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 方法来发送数据。