如何在Vue单页面应用中配置统计代码

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/18/%E5%A6%82%E4%BD%95%E5%9C%A8Vue%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%BB%9F%E8%AE%A1%E4%BB%A3%E7%A0%81/

摘要

本文主要讲述了：

背景
百度统计

正文

背景

做完项目上线之后，为了掌握项目的具体使用情况，需要配置统计工具。

Vue 单页面应用实际上只有 1 个 index.html 文件，它的路由是通过 hash 来模拟的。

一般的统计代码默认是无法统计虚拟路由的，因此都需要在全局后置 Hook（此时页面已经渲染完成）里手动调用 JavaScript API 进行统计。

百度统计

my-vue/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var _hmt = _hmt || []; // 定义全局变量
      _hmt.push(['_setAutoPageview', false]); // 禁用自动PV跟踪
      (function () {
        var hm = document.createElement('script');
        hm.async = true;
        hm.src = '//hm.baidu.com/hm.js?YOUR_ID'; // 使用自己的ID替换YOUR_ID
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </body>
</html>

my-vue/src/router.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

router.afterEach((to, from) => {
  // 全局后置Hook，此时页面已经渲染完成
  _hmt.push(['_trackPageview', to.path]); // 手动发送PV统计请求
});

export default router;