在 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方法：- 使用
fetchAPI 向后端接口发送时长数据。 - 根据响应结果输出相应的日志信息。
- 使用
注意事项
- 请将
'your_backend_api_url'替换为实际的后端接口地址。 - 在实际项目中，建议使用
axios等成熟的 HTTP 请求库来发送请求。 - 由于浏览器的安全限制，在
beforeunload事件中使用异步请求可能无法保证请求一定会发送成功，你可以考虑使用同步请求或者在unload事件中结合navigator.sendBeacon方法来发送数据。
