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

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

vue加百度统计代码(亲测有效)的更多相关文章

  1. vue单页应用中根据不同城市不同业务添加百度统计代码

    问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...

  2. 如何给WordPress安装百度统计代码

    1.注册并登录百度统计,点击页面顶部的“网站中心”,然后点击右上角“+ 新增网站”,填写网站域名确定后,点击“复制代码”:2.登录 WordPress 后台,点击左侧导航栏“外观”里的“编辑”,然后点 ...

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

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

  4. PHP小程序后端支付代码亲测可用

    小程序后端支付代码亲测可用 <?php namespace Home\Controller; use Think\Controller; class WechatpayController ex ...

  5. uniapp增加百度统计代码(h5)

    做了个微信公众号文章互相阅读的h5界面,http://mptask.wintp.top/(只能微信浏览器打开),其中用到了统计代码,记录如下. 1.新建 tj.html 界面 可放置在项目的根目录,文 ...

  6. 单页面vue引入百度统计的使用方法!

    最近组长安排着做一个项目,h5的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计!!!我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目 ...

  7. nuxt.js 加百度统计

    Mark一下: 在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件.统计统计分析我们可以获取网站pv,uv ...

  8. c++ builder TListView控件按字符串排序(根据网上代码亲测ok)

    //--------------------------------------------------------------------------- /* 首先将一个列表框控件安放在Form上, ...

  9. STM32—中断详解(配合按键中断代码,代码亲测)

    在STM32中执行中断主要分三部分: 1.配置NVIC_Config()函数 2.配置EXTI_Config()函数 3.编写中断服务函数 (注:本文章所用代码为中断按键代码,实现了按键进入中断从而控 ...

随机推荐

  1. [deb]制作deb包

    转自:http://www.cnblogs.com/Genesis-007/p/5219960.html 查看系统安装了哪些deb包: dpkg -l 打包: dpkg -b dir result.d ...

  2. 如何安装docker-compose

    docker-compose还是挺好用的~~~~~ 这里简单介绍下两种安装docker-compose的方式,第一种方式相对简单,但是由于网络问题,常常安装不上,并且经常会断开,第二种方式略微麻烦,但 ...

  3. 放弃winform的窗体吧,改用html作界面,桌面应用程序UI的新的开发方式。

    做过很多winform项目,都为winform控件头疼不已.想实现一些漂亮的样子总是很难.我这里列举几个缺点: 1.winform控件大多是 绝对布局 ,你需要给出准确的坐标.那么在实现居中效果就会很 ...

  4. ApplicationContextAware接口的作用

      1/============== 在Web应用中,Spring容器通常采用声明式方式配置产生:开发者只要在web.xml中配置一个Listener,该Listener将会负责初始化Spring容器 ...

  5. so在genymotation中错误问题

    genymotation的android模拟器运行起来非常快,但是有些项目安装到上面不是crash,log一般是so文件调用失败的信息,或则直接提示INSTALL_FAILED_CPU_ABI_INC ...

  6. Android的线程使用来更新UI----Thread、Handler、Looper、TimerTask等

    方法一:(java习惯,在android不推荐使用) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread( new Runnable() { ...

  7. Numpy 的数组转置和轴对换

    数组转置 转置(transpose)是重塑的一种特殊形式, 它返回的是源数据的视图(不会进行任何操作.)数组不仅有transpose,还要特殊的T属性 计算矩阵内积 高维数组transpose 详细讲 ...

  8. qualcomm sdm450 tinymix mic record

    最近需要使用tinymix配置主MIC和副MIC进行录音,一般副MIC都是拿来降噪用的.记录一下副MIC录音的方法. 没有找到高通的音频通路图,只能通过logcat,查看audio_route,然后找 ...

  9. android 监听声音变化

    新的项目需要监听android声音的变化,再做出对应的操作,从网上找了个demo验证.记录于此. 参考链接 https://my.oschina.net/yuanxulong/blog/372268 ...

  10. Solr系列四:Solr(solrj 、索引API 、 结构化数据导入)

    一.SolrJ介绍 1. SolrJ是什么? Solr提供的用于JAVA应用中访问solr服务API的客户端jar.在我们的应用中引入solrj: <dependency> <gro ...