【项目情况】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
未使用官网上的<script>...</script>
避免开发环境的访问数据也上传到统计平台。并且，对线上域名进行了匹配(line4)
当然，也可以在百度统计平台进行“过滤规则设置”：【管理】-> 对应监控域名的【更多设置】中的【过滤规则设置】，在该页面中进行设置
