Vue 路由守卫怎么实现页面访问日志的自动化上报记录-Vue.js-PHP中文网

页面访问日志上报最适合用全局后置守卫router.afterEach实现，因其在跳转成功、组件挂载后触发，确保to/from状态真实可靠；需过滤无效路径，优先使用sendBeacon或keepalive fetch上报，结合路由meta增强分析维度。

vue 路由守卫怎么实现页面访问日志的自动化上报记录

页面访问日志的自动化上报，最适合用 全局后置守卫（router.afterEach） 实现——它不干预导航流程，只在跳转成功后触发，安全、稳定、无副作用。

为什么选 afterEach 而不是 beforeEach？

beforeEach 在跳转前执行，此时页面还没渲染，用户可能中途取消或重定向，上报容易失真；而 afterEach 保证：路由已确认、组件已挂载、to 和 from 状态真实可靠，是记录“一次有效访问”的黄金时机。

基础日志字段与上报逻辑

每次跳转可采集的关键信息包括：from.path、to.path、to.name、to.meta.title、时间戳、用户 ID（若已登录）、设备类型等。上报建议用轻量 fetch 或封装好的埋点 SDK：

避免阻塞主线程：使用 keepalive: true 或 sendBeacon（兼容性好，页面卸载时也能发出）
失败不重试：日志属非关键数据，上报失败直接丢弃，不打断用户操作
过滤无效路径：如 /login、/404、静态资源路由等可按需排除

实际代码示例

在 router/index.js 中添加：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

router.afterEach((to, from) => {
  // 跳过登录页、错误页等无需统计的路径
  if (['/login', '/404', '/500'].includes(to.path)) return

  const logData = {
    from: from.path || '/',
    to: to.path,
    title: to.meta.title || '未知页面',
    timestamp: Date.now(),
    userId: store.state.user?.id || null,
    userAgent: navigator.userAgent
  }

  // 推荐：优先用 sendBeacon（页面关闭时仍能发）
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/log/visit', JSON.stringify(logData))
  } else {
    fetch('/api/log/visit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(logData),
      keepalive: true
    })
  }
})