vue单页应用加百度统计代码(亲测有效)

网友投稿 707 2023-02-20


vue单页应用加百度统计代码(亲测有效)

申请百度统计后,会得到一段js代码,需要插入到每个网页中去,在vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码;所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量。

解决方法

在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面,这样每次router发生改变的时候都会执行一下统计代码,这样就达到了目的,代码如下:

router.afterEach( ( to, from, next ) => {

setTimeout(()=>{

var _hmt = _hmt || [];http://

(function() {

//每次执行前,先移除上次插入的代码

document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?xxxx";

hm.id = "baidu_tj"

var s = document.getElementsByTagName("script")[0];

s.parentNode.inserhttp://tBefore(hm, s);

})();

},0);

} );

总结

以上所述是给大家介绍的vue单页应用加百度统计代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:关于python接口自动化测试的信息
下一篇:api接口管理方案(api接口使用教程)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~