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

VUE单页面应用在进行百度统计时，只能统计到主页的访问次数，而不能统计到子页面。这是因为，如果按照以上百度统计提供的方法添加统计代码，在VUE单页面应用，如果不刷新，只会加载一次index.html，加载后会继续加载main.js、App.vue、index.js等，所以不论在页面内怎么切换，都只会统计到一次。解决方法是，使用router的beforeEach全局前置...

菜鸟六十八

22914人浏览 · 2020-01-10 11:53:33

菜鸟六十八 · 2020-01-10 11:53:33 发布

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

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

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

将代码放在index.html的head中

  <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路由全局后置钩子或全局前置守卫调起百度统计即可

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]);
  }
});

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^