部分页面统计用户访问时长

方式1

import { createApp } from "vue";
import { createPinia } from "pinia";import App from "./App.vue";
import router from "./router";const app = createApp(App);app.use(createPinia());
app.use(router);// 初始化变量
let startTime = 0; // 开始计时时间
let totalDuration = 0; // 总浏览时长（秒）
let isActive = false; // 页面是否活跃// 页面加载时开始计时
window.addEventListener("load", () => {console.log("页面加载完毕");startTime = Date.now();isActive = true;
});// 监听页面可见性变化（切换标签页、最小化窗口）
document.addEventListener("visibilitychange", () => {// console.log("visibilitychange");if (document.hidden) {// 页面隐藏：停止计时，累加时长if (isActive) {totalDuration += Math.floor((Date.now() - startTime) / 1000);isActive = false;}} else {// 页面显示：重新开始计时startTime = Date.now();isActive = true;}
});// 监听窗口焦点变化（切换到其他应用时）
window.addEventListener("blur", () => {console.log("blur");if (isActive) {totalDuration += Math.floor((Date.now() - startTime) / 1000);isActive = false;}
});window.addEventListener("focus", () => {console.log("focus");startTime = Date.now();isActive = true;
});// 页面卸载时处理时长（上报或存储）
window.addEventListener("beforeunload", (event) => {// 累加最后一次活跃时长if (isActive) {totalDuration += Math.floor((Date.now() - startTime) / 1000);}// 1. 存储到本地 localStorage（刷新后仍可获取）localStorage.setItem("pageBrowseDuration", totalDuration);// 2. 上报到服务器（示例：通过接口提交）// fetch('/api/report-duration', {//   method: 'POST',//   headers: { 'Content-Type': 'application/json' },//   body: JSON.stringify({ duration: totalDuration, url: window.location.href })// });console.log("当前页面浏览时长：", totalDuration, "秒");
});app.mount("#app");

方式2

// src/main.jsimport { createApp } from "vue";
import { createPinia } from "pinia";import App from "./App.vue";
import router from "./router";const app = createApp(App);app.use(createPinia());
app.use(router);let pageTimers = {}; // 存储各个页面的计时信息// 路由前置守卫
router.beforeEach((to, from, next) => {const now = Date.now();// 如果有正在计时的页面，则结束它的计时并保存if (from.meta.trackTime) {if (pageTimers[from.path]) {pageTimers[from.path].duration += Math.floor((now - pageTimers[from.path].start) / 1000);delete pageTimers[from.path];}}// 如果即将进入需要追踪的页面，则开始新的计时if (to.meta.trackTime) {pageTimers[to.path] = {start: now,duration: 0};}next();
});// 页面卸载前上报数据
window.addEventListener("beforeunload", () => {const now = Date.now();// 结束所有正在进行的计时for (let path in pageTimers) {pageTimers[path].duration += Math.floor((now - pageTimers[path].start) / 1000);// 可以在这里发送每个页面的数据到服务器或本地存储console.log(`页面 ${path} 浏览时长:`, pageTimers[path].duration, "秒");// 示例：存储到 localStorage 或发送至服务端localStorage.setItem(`pageDuration_${path}`, pageTimers[path].duration);}
});app.mount("#app");