vue单页应用加百度统计代码（亲测有效）
更新时间：2018年01月31日 16:38:58 作者：蓓蕾心晴
这篇文章主要介绍了vue单页应用加百度统计代码的解决方法，需要的朋友参考下吧
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，在Vue.js项目首先想到的可能就是，把统计代码插入到index.html入口文件中，这样就全局插入，每个页面就都有了;这样做就涉及到一个问题，Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量。
解决方法
在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面，这样每次router发生改变的时候都会执行一下统计代码，这样就达到了目的,代码如下:
router.afterEach( ( to, from, next ) => {
setTimeout(()=>{
var _hmt = _hmt || [];
(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.insertBefore(hm, s);
})();
},0);
} );
总结
以上所述是小编给大家介绍的vue单页应用加百度统计代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue项目中自动导入svg并愉快的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍，而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章介绍了vue.js实现开关(switch)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了前端框架vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Suspense 是 Vue 3 中用于处理异步数据加载的特性,它使得在加载异步数据时可以提供更好的用户体验,下面小编就来和大家详细讲讲Suspense如何优雅处理异步数据加载吧2023-10-10
最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，分享到脚本之家平台，对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧2018-10-10
这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue父子组件的互相传值和调用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了vue3 elementplus table合并写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
最新评论