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


Posted in Javascript onJanuary 31, 2018

申请百度统计后,会得到一段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单页应用加百度统计代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
悬浮数字的实现案例
Feb 19 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 #Javascript
微信小程序实现折叠面板
Jan 31 #Javascript
Vue中render函数的使用方法
Jan 31 #Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 #Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
You might like
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
jQuery实现图片切换效果
2020/10/19 jQuery
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
postman传递当前时间戳实例详解
2019/09/14 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
会计出纳岗位职责
2013/12/25 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
质量保证书范本
2014/04/29 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
论文答辩开场白大全
2015/05/27 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Python 如何安装Selenium
2021/05/06 Python
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python