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

方式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.js

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 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");