vue中引入百度统计

   vue作为单页面的，引入百度统计，需要注意不少。

  一、基本的流量统计

     在index.html 入口文件中引入百度统计生成的一连串代码：

     

      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement('script');
        hm.src = 'https://hm.baidu.com/hm.js?f62fe3c5d9343dece386407e99be4e39';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(hm, s);
      })();

     这个会统计页面总的流量。

 二、页面中监听事件

     需要在相应的vue  文件中加入相应的代码

    methods: {
      getDownIosUrl() {
        window._hmt.push(['_trackEvent', 'IosDoctor', 'click', '来康医生IOS版', 'opt_value']);
        window.location.href = 'itms-apps://itunes.apple.com/cn/app/id1233649213?mt=8';
      },
}

       PS：必须要写window._hmt.push  否则会监听不到

    

三、单个页面流量的检测

     在路由的配置文件中，加入这行代码。

// 测试百度统计
routeInstance.beforeEach((to, from, next) => {
  if (to.path) {
    window._hmt.push(['_trackPageview', '/pro/#' + to.fullPath]);
  }
  next();
})

      

'/pro/#'  写相对路径，解决vue 路由 hash 模式下，百度统计无法统计单页面的问题。