Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VUE单页面应用百度统计失效问题解决方法

VUE单页面应用百度统计失效问题解决方法

作者头像
用户1392128
发布于 2024-01-08 09:48:06
发布于 2024-01-08 09:48:06
40700
代码可运行
举报
运行总次数:0
代码可运行

VUE单页面应用在进行百度统计时,只能统计到主页的访问次数,而不能统计到子页面。

这是因为,如果按照以上百度统计提供的方法添加统计代码,在VUE单页面应用,如果不刷新,只会加载一次 index.html, 加载后会继续加载main.js、App.vue、index.js等,所以不论在页面内怎么切换,都只会统计到一次。

解决方法是,使用router的beforeEach 全局前置守卫或 方法在每次路由之前调用百度统计代码。

将代码放在index.html的head中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <script>
    var _hmt=_hmt||[];
    (function() {
      var hm=document.createElement("script");
      hm.src="https://hm.baidu.com/hm.js?a5ba0f0abe46b3c4d0539c55e4d02098";
      var s=document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm,s);
    })();
  </script>

在VUE路由全局后置钩子或全局前置守卫调起百度统计即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.beforeEach((to, from, next) => {
    if (to.path) {
    window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
  }
 next()
});

或者

router.afterEach(function(to, from) {
    if (to.path) {
    window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
  }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
百度、Google 埋点统计(Vue篇)
在Vue单页面开发中接入百度统计代码时,如果直接按照官网的走会出现错误,就是_hmt找不到,这是因为在一个js文件里声明的变量在另一个js文件里是找不到的,所以需要把_hmt挂载到window对象下,这样_hmt成为了全局变量,就可以在任何地方访问了。
White feathe
2021/12/08
1.6K0
Nuxt 项目中如何引入百度统计?
在部署一个网站之后,我们最关心的事情无异于是访问量,以及对它的分析。国内的百度统计是一个不错的选择,基本的功能都是免费的。
子舒
2022/06/09
1.9K0
vue中加入百度统计
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码;所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量。
青梅煮码
2023/03/02
7760
vue项目中添加百度统计
在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面,这样每次router发生改变的时候都会执行一下统计代码,这样就达到了目的。
似水的流年
2020/06/28
1.4K0
给网站添加百度统计(hexo与flarum)
百度统计改版啦,现在统计面板显示的更加清晰,统计及时性更高,统计脚本不到1kb。我有两个站点,一个是hexo做编译器的静态站,另外一个是php环境用nginx代理的flarum模板站点,这里记录下给两个站点换上百度统计的过程。如果你也有类似站点需求可以参考本文。
keyle
2024/11/01
1680
给网站添加百度统计(hexo与flarum)
百度统计被刷广告怎么办
发布这些广告的人针对的就是网站的站长,他的这些广告产品最终就是卖给站长,定向性较强。百度统计刷广告的原理无非就是他们拿到您的百度统计 ID,然后运用程序中止访问给百度统计构成假象以为有大量的用户来访问您的某个页面等等。这样在后面的百度统计中就能实时的展示出他们想的投放的广告内容。
雾海梦曦
2022/11/14
9070
百度统计被刷广告怎么办
Gatsby中使用百度统计功能来分析网站流量!
哪些人访问了网站?访问了那些网站哪些页面?访问者来自于哪个省市区?年龄多大?这些问题,可通过百度统计这个插件完成。
Learn-anything.cn
2021/12/02
9810
uniapp增加百度统计代码(h5)
请复制如下代码到上方新建的 html 中,修改自己的百度统计代码,不清楚如何获取统计代码的可以参考 步骤4
niceyoo
2020/01/14
1.1K0
[个人网站搭建]·极简方式统计个人网页访问量(基于百度统计)
个人主页--> https://xiaosongshine.github.io/
小宋是呢
2019/06/27
3.3K0
[个人网站搭建]·极简方式统计个人网页访问量(基于百度统计)
【Vue Router】010-导航守卫
“导航”,表示路由正在发生改变。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。主要用于在导航过程中重定向和取消路由,或者添加权限验证、数据获取等业务逻辑。
訾博ZiBo
2025/01/06
1110
【Vue Router】010-导航守卫
WordPress网站中添加百度统计代码
百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势、来源分析、转化跟踪、页面热力图、访问流等多种统计分析服务,同时与百度搜索、百度推广、云服务无缝结合,为网站的精细化运营决策提供数据支持,进而有效提高企业的投资回报率。
桑先生
2019/12/17
1.3K0
VUE框架:vue2转vue3全面细节总结(2)导航守卫
全局前置守卫通常用来做权限控制,使用 router.beforeEach 即可添加:
淼学派对
2023/10/14
4210
VUE框架:vue2转vue3全面细节总结(2)导航守卫
网站访问量的统计_域名访问量统计
网站排名很大一部分是靠访问量,那么如何统计网站访问量呢?更重要的是我们的流量对网站排名是有效的。
全栈程序员站长
2022/09/20
10.9K1
zblog网站改造百度MIP的教程仅针对zblog轻奢主题
这篇文章来聊聊启用百度MIP轻奢主题之后你可能会遇到的一些问题,当然更有可能是你遇到了,而我却没有遇到,届时需要一起研究,这是后话。
李洋博客
2023/10/13
2790
zblog网站改造百度MIP的教程仅针对zblog轻奢主题
百度统计失效,referrer背锅了
前段时间遇到一个问题,就是我的个人网站需要接入第三方百度统计,因为我的文章图片有来自第三方微信后台上传的文章,所以使用<meta name="referrer" content="no-referrer">解决图片访问403的问题,但是此时这个导致我百度统计失效了,于是去查询了一下referrer这个特性。
Maic
2022/12/21
1.5K0
百度统计失效,referrer背锅了
推荐一个jekyll博客模板
本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢)。功能改造如下:
付威
2018/12/05
1.8K0
vue项目创建步骤 和 路由router知识点
1、创建一个vue项目步骤 (windows环境下)。创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js、webpack、vue-cli)。cmd打开终端。
tandaxia
2020/02/10
2.1K0
记录一次服务器被挂马的现象
早上接到运营的消息,说客户反馈网站通过搜索引擎打开时,显示为赌博网站。跟以往的情况不同,这次怎么都找不到被篡改的 PHP 文件,最后发现是配置文件被篡改。
jwj
2023/04/07
6K0
记录一次服务器被挂马的现象
页面点击特效
<script src="js/jquery.js"></script> <div class="changeColor" style="height:500px"> <h1 style="text-align:center">啦啦啦啦啦啦</h1> </div> <style type="text/css"> /*滚动文字样式*/ #container { position: relative; width: 200px; } /*滚动文字样式*/ #content {
小语雀网
2022/05/06
2.9K0
使用百度统计跟踪和分析 WordPress 404 页面
我们知道正确处理 404 页面是 SEO 链接建设中非常重要的一环,我们需要分析网站上的 404 页面有哪些,哪里来的?然后改正这些 404 页面,使用 301 重定向把流量导到正确的页面上去。
Denis
2023/04/14
4290
使用百度统计跟踪和分析 WordPress 404 页面
推荐阅读
相关推荐
百度、Google 埋点统计(Vue篇)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验