vue实现访问统计

Vue 实现访问统计的方法

使用第三方统计工具

Google Analytics 或百度统计等工具可以快速集成到 Vue 项目中。在 index.html 中引入统计代码，或在 Vue 组件中动态加载脚本。

<!-- Google Analytics 示例 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

前端路由追踪

使用 Vue Router 的全局守卫钩子 afterEach 来记录页面访问路径。

// main.js 或 router.js
router.afterEach((to) => {
  if (typeof gtag !== 'undefined') {
    gtag('config', 'GA_MEASUREMENT_ID', {
      page_path: to.path
    });
  }
});

自定义后端统计接口

通过 Axios 发送访问数据到后端 API，适合需要自定义统计逻辑的场景。

// 在组件或全局混入中
export default {
  mounted() {
    this.recordVisit();
  },
  methods: {
    recordVisit() {
      axios.post('/api/visits', {
        path: this.$route.path,
        userAgent: navigator.userAgent
      });
    }
  }
}

使用 Vue 插件

封装统计逻辑为 Vue 插件，便于复用和维护。

// plugins/analytics.js
export default {
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        this.$trackPageView();
      },
      methods: {
        $trackPageView() {
          console.log('Track page:', this.$route.path);
        }
      }
    });
  }
}

// main.js
import Analytics from './plugins/analytics';
Vue.use(Analytics);

注意事项

• 隐私合规：确保符合 GDPR 等数据保护法规，必要时添加用户同意流程。
• 性能优化：统计脚本异步加载，避免阻塞页面渲染。
• 数据过滤：在客户端或服务端过滤爬虫和无效请求。