申请百度统计后,会得到一段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单页应用中根据不同城市不同业务添加百度统计代码

    问题描述: 我们知道一般的百度统计代码是添加在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. 手写体识别中用到的Tensorflow函数复习

    tf.truncated_normal(shape, stddev=0.1) 从截断的正态分布中输出随机值. 生成的值服从具有指定平均值和标准偏差的正态分布,如果生成的值大于平均值2个标准偏差的值则丢 ...

  2. Netty4.x中文教程系列(二) Hello World !<转>

    在中国程序界.我们都是学着Hello World !慢慢成长起来的.逐渐从一无所知到熟悉精通的. 第二章就从Hello World 开始讲述Netty的中文教程. 首先创建一个Java项目.引入一个N ...

  3. iis7.5 发布mvc出错的解决办法

    发布mvc,配置iis7.5时,遇到这个错误. xxxx'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b ...

  4. 解决IDEA 中git 无法自动push 提交问题 Push failed: Failed with error: Could not read from remote repository.

    Push failed: Failed with error: Could not read from remote repository.

  5. 两个项目之间通过 RestTemplate 进行调用

    A服务发出请求: @RequestMapping("/jqgridjsondata.json") @ResponseBody public String jqgridJsonDat ...

  6. EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.

    启动两个client,过了一会,停了其中一个,访问注册中心时,界面上显示了红色粗体警告信息: 查阅了很多资料,终于了解了中间的问题.现将理解整理如下: Eureka server和client之间每隔 ...

  7. DFS-深度优先遍历

    #include <iostream> /* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 0 0 4 1 Total: 9 7 5 Min: 5 ...

  8. 记一次MyEclipse闪退的解决方法

    http://www.th7.cn/Program/java/201408/262487.shtml ———————————————————————————————————————————————— ...

  9. 升级ndk后Android studio的build错误

    上周末升级了ndk,应该是最新版的v17.0版本了,当时也没测试,屁颠屁颠的就回家撸猫了... 今天一跑代码在build时报错: ABIs [armeabi] are not supported fo ...

  10. 解决Android 7.0 App内切换语言不生效的问题

    Android7.0及以前版本,Configuration中的语言相当于是App的全局设置: public static void changeAppLanguage(Context context, ...