前言

申请百度统计后,会得到一段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

vue单页应用添加百度统计的更多相关文章

  1. 【前端vue开发】vue单页应用添加百度统计

    前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...

  2. vue单页面应用加入百度统计

    版权声明:本文为CSDN博主「钟文辉」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/qq_39753974/a ...

  3. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  4. Wordpress网站中添加百度统计代码

    百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...

  5. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  6. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  7. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  8. phpcms v9如何给父级单页栏目添加内容

    对于phpcms单页的调用相信大家都应该没问题,那么如果我们在后台添加的单页有二层甚至更多的时候,这样在管理内容上是没有给父级栏目添加内容这一功能的!那么我们该怎么实现这个功能并调用呢? 首先我们要修 ...

  9. 基于vue单页应用的例子

    代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...

随机推荐

  1. Oracle实战笔记(第一天)

    导读 笔记内容来自韩顺平老师的视频<玩转Oracle实战教程>,可以结合笔记进行观看.第一天视频中还有Oracle的介绍和安装等内容,很容易搜索到,这里就不再进行总结. 目录 1.命令行工 ...

  2. Kali学习笔记23:Web渗透简介

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 我这里先说几句: 其实从缓冲区溢出到Web渗透之间还有 ...

  3. SpringCache实战遇坑

    1. SpringCache实战遇坑 1.1. pom 主要是以下两个 <dependency> <groupId>org.springframework.boot</g ...

  4. Aseprite+Cocos:打包像素画图,导入到cocos里并动起来

    前言:Aseprite入门教程            Aseprite入门:第一个gif动图 1.制作像素画: 按照上一次的小球跳动制作过程,先制作一个像素画动画: 若是导出gif动态图,效果如下: ...

  5. python 中numpy dot函数的使用方法

    这个函数在的数字信号处理中用处还是比较广泛的,函数的具体定义如下所示: numpy.dot(a, b, out=None) 该函数的作用是获取两个元素a,b的乘积,表示的含义如下所示: dot(a, ...

  6. HOG算法资源备忘

    最近再研究这个算法,找了不少资料来研究,发现这方面的资料好的并不多,今天就把找到的经典的资料做一个汇总,方便后续查阅吧. 一 基本概念和推导: 1 解释最清楚的:中文网站:https://blog.c ...

  7. 剑指offer【06】- 旋转数组的最小数字(java)

    题目:旋转数组的最小数字 考点:查找和排序 题目描述:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4, ...

  8. PythonDay02——编程语言、python介绍以及安装解释器、运行程序的两种方式、变量

    一.编程语言 1.1 机器语言:直接用计算机能理解的二进制指令编写程序,直接控制硬件 1.2 汇编语言:用英文标签取代二进制指令去编写程序,本质也是直接控制硬件 1.3 高级语言:用人能理解的表达方式 ...

  9. Git基本命令 -- 历史

    历史. 收先需要了解一下git log命令, 使用git的帮助看看: git help log: 执行该命令后, 我的win10弹出来一个html页面, 里面是git log命令的帮助: 首先看看gi ...

  10. linux定时任务执行没结果,手动执行有结果问题总结

    今天写了个脚本手动执行有结果,但是放到系统定时任务跑却没结果,之前也遇到这种问题解决了没记录后面又懵逼了一次~~~ 如下图: 手动执行有结果 放到定时任务中每五分钟执行一次 解决方法: 脚本中加载系统 ...