博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue单页应用添加百度统计
阅读量:6984 次
发布时间:2019-06-27

本文共 952 字,大约阅读时间需要 3 分钟。

前言

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

解决方法

main.js文件中调用vue-routerafterEach方法,将统计代码加入到这个方法里面,这样每次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);    } );

转载地址:https://blog.jae.sh/article/v924mq.html

你可能感兴趣的文章
CodeIgniter学习笔记一
查看>>
workspace-project-target关系与解耦工程结构总结
查看>>
EhCache的配置
查看>>
Linux 设置时区
查看>>
在maven中引用github上的资源
查看>>
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
查看>>
Flex手机开发-退出应用程序
查看>>
常用的7大排序算法汇总
查看>>
数字转化成时分秒(二)
查看>>
Golang通过syscall调用win32的Api
查看>>
阿里云Redis (安装包安装篇)
查看>>
Spring Bean的装配(非XML文件方式)
查看>>
100万“愤怒的小鸟”:中国手机开发者生存调查
查看>>
centos 6.3 x86_64安装32位JDK的问题
查看>>
springmvc学习笔记(17)-上传图片
查看>>
驰骋工作流引擎表单设计控件-字段类控件(2)
查看>>
java高级-多线程编程
查看>>
spark内核回顾思考 RDD
查看>>
导出Android手机应用apk
查看>>
高并发分布式系统中生成全局唯一(订单号)Id
查看>>