vue实现页面停留时长

实现页面停留时长统计的方法

在Vue中实现页面停留时长统计，可以通过生命周期钩子和浏览器API结合实现。以下是几种常见的方法：

使用生命周期钩子和Date对象 在组件的created或mounted钩子中记录进入时间，在beforeDestroy或beforeUnmount钩子中计算停留时长并发送统计请求。

export default {
  data() {
    return {
      enterTime: null
    }
  },
  mounted() {
    this.enterTime = new Date()
  },
  beforeUnmount() {
    const leaveTime = new Date()
    const duration = leaveTime - this.enterTime

    // 发送统计请求
    this.sendAnalytics(duration)
  },
  methods: {
    sendAnalytics(duration) {
      // 使用fetch或axios发送数据到后端
      console.log(`页面停留时长: ${duration}ms`)
    }
  }
}

使用window.performance API 浏览器提供的Performance API可以更精确地测量页面性能和时间。

export default {
  mounted() {
    window.performance.mark('pageEnter')
  },
  beforeUnmount() {
    window.performance.mark('pageLeave')
    window.performance.measure('pageStay', 'pageEnter', 'pageLeave')

    const measures = window.performance.getEntriesByName('pageStay')
    const duration = measures[0].duration

    this.sendAnalytics(duration)
  }
}

使用路由守卫全局统计 对于SPA应用，可以在全局路由守卫中实现全站页面停留统计。

// router.js
let startTime
router.beforeEach((to, from, next) => {
  if (from.name) {
    const endTime = Date.now()
    const duration = endTime - startTime
    console.log(`停留在${from.name}时长: ${duration}ms`)
    // 发送统计
  }

  startTime = Date.now()
  next()
})

注意事项

• 对于单页应用，需要考虑路由切换时的统计
• 用户最小化窗口或切换标签页时需要特殊处理
• 生产环境应该将数据发送到后端存储，而非仅console.log
• 考虑用户隐私和GDPR等数据保护法规

以上方法可以根据实际需求选择或组合使用，实现精确的页面停留时长统计功能。