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 相关文章推荐
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
react antd实现动态增减表单
Jun 03 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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
解决python "No module named pip" 的问题
2018/10/13 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
出纳岗位职责模板
2013/11/27 职场文书
英语商务邀请函范文
2014/01/16 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android