前端SPA单页应用数据统计方案（ReactJS-VueJS）

前端SPA单页应用数据统计方案（ReactJS/VueJS）1、百度统计代码：UVPV可能有问题SPA前端项目中的statistics方法数据统计在国内往往是一件比较麻烦的事情，React和Vue也是如此。在发现问题之前，我们得想一想百度统计的统计原理是什么？1-1：百度统计代码var_hmt=_hmt||[];(function(){varhm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?ccb0e8f10ba18ccb5041e8aa48068c1b";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();通过JSONP加载了一个百度统计的JS文件，这个JS文件，比较大，粗略看了下hm.js的源码文件，获取了本地的cookie，session，url，ua等，然后有一些处理数据的方法和一些上传数据的方法。那么百度统计在什么情况下会触发上传操作呢？让我们做实验？1.每次刷新页面，肯定会触发这个。2、是否会在路由进入下一个新页面时触发？（待验证）3、路由返回老页面会不会被触发？（待验证）接下来：我们来实现一下待验证的场景，看看会不会触发。1-2：加入react-router在项目中constGetBaidu=props=>{letchildren=props.children;让_hmt=_hmt||[];(function(){varhm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?ccb0e8f10ba18ccb5041e8aa48068c1b";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();returnchildren;};constApp=()=>{return(

);};这个类似于一个拦截器，将路由跳转前百度统计的代码重新home。同样，Vue-router项目也类似。1-3：在项目中添加Vue-routerrouter.afterEach((to,from,next)=>{setTimeout(()=>{var_hmt=_hmt||[];(function(){//每次执行前去掉最后插入的代码hm.baidu.com/hm.js?xxxx";hm.id="baidu_tj"vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();},0);});这里只是一个简单粗暴的demo，展示亲测等很多项目需要解决的数据统计问题。总结：React和Vue的方法类似，都是在路由跳转前进行拦截操作。在页面中添加需要添加的方法和统计代码即可。