vue站长统计实现
2021-05-12 本文已影响0人
Yluozi
image.png
vue站长统计实现
一、申请百度统计账号
地址：https://tongji.baidu.com/sc-web/
二、在左侧菜单中
点击代码管理，填写网站信息，生成相关的统计JS代码：
image.png
三、vue修改
在vue项目的index.html文件中，加入两块js代码：
<script>
var _hmt = _hmt || [];
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?7007d53664243dc0e53bcf92791a712d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
位置如下图所示：
image.png
在vue项目中的main.js中，加入路由跳转监听代码
// 加入百度统计
router.beforeEach((to, from, next) => {
if (to.path) {
if (window._hmt) {
window._hmt.push(['_trackPageview', '/#' + to.fullPath])
}
}
next()
})
位置如下图所示：
image.png
当代码都改完后，部署到自己的网站上，然后点击菜单，百度统计可以手动检查代码是否生效
image.png
