【工具类】vue项目中使用百度统计

【项目情况】vue单页面应用(spa) + hash路由，要求统计用户对每个页面的访问情况

【实现代码】在router/index.js或main.js中实现以下代码

router.beforeEach((to, from, next) => {
    // 在生产环境，发送百度统计
    /* eslint no-underscore-dangle: ["error", { "allow": ["_hmt"] }]*/
    if (window.location.hostname === '生产环境域名' && to.path) {
        if (window._hmt) {
            window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
        } else {
            window._hmt = [];
            (function () {
                let hm = document.createElement('script');
                hm.src = 'https://hm.baidu.com/hm.js?百度统计ID';
                let s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(hm, s);
            })();
        }
    }
    next();
});

【分析】

1、参考官网

开放平台 - 百度统计

百度统计

2、逻辑整理

在路由守卫router.beforeEach中实现

项目采取hash路由，并要求统计用户对每个页面的访问情况，所以在路由守卫中发送统计数据。

另外，如果使用的是History路由，还可以在统计平台进行“单页应用设置”：【管理】-> 左侧导航栏中的【代码管理-单页应用设置】，详细内容参考官网：http://tongji.baidu.com/web/help/article?id=324&type=0

未使用官网上的

避免开发环境的访问数据也上传到统计平台。并且，对线上域名进行了匹配(line4)

当然，也可以在百度统计平台进行“过滤规则设置”：【管理】-> 对应监控域名的【更多设置】中的【过滤规则设置】，在该页面中进行设置