统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计

百度统计传送门

按提示注册登录即可

登录后-->管理-->新增网站,配置好后会出现如下的 自有网站列表

在要统计的网站 右侧,点击“获取代码”

拷贝要统计网站的代码

统计vue项目中的每个页面的访问量

1.在main.js中 贴入 拷贝的代码 并稍作修改,使用window全局变量,如下:

var _hmt = _hmt || [];
window._hmt = _hmt; // 修改为window 全局变量
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?"+ 百度站点id;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();

不使用window全局变量:_hmt会找不到然后报错,这是因为在一个js文件里声明的变量在另一个js文件里是找不到的,所以需要把_hmt挂载到window对象下,这样_hmt成为了全局变量,就可以在任何地方访问了

2.在路由创建实例后,调用beforeEach方法,保证每个路由跳转时都将其跳转的路由推给百度。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Main from '../pages/Main.vue' Vue.use(Router)
const routes = [
{
path: '/hellowold',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/main',
name: 'Main',
component: Main
}
] // export default new Router({
// // mode: 'history',
// routes: routes
// }) const router = new Router({
routes: routes
}) router.beforeEach((to, from, next) => {
if (window._hmt) {
if (to.path) {
window._hmt.push(['_trackPageview', '/#' + to.fullPath])
}
}
next()
}) export default router

https://www.jianshu.com/p/febd38110645

单页面vue引入百度统计 https://www.cnblogs.com/zengfp/p/9778119.html

vue项目中使用百度统计的更多相关文章

  1. 如何在vue项目中使用百度编辑器ueditor

    百度编辑器官方并没有提供vue项目使用说明,目前网上也有不少人实现了相关功能,这里就不再重复,只是针对自身项目碰到的情况做个记录,就当是熟悉了一遍富文本编辑器的代码结构. 按照网上的做法,基本可以实现 ...

  2. vue项目中添加百度地图功能及解决遇到的问题详解

    第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...

  3. vue项目中使用百度富文本编辑器ueditor

    第一步,安装依赖,并且把ueditor整个文件夹放入public里边 第二步,在你需要编辑的地方引入,或者main.js中全局引入 XX.vue文件中写入下面代码,创建编辑器. <vue-ued ...

  4. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  5. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  6. 在vue项目中获取当前城市

    在vue项目中使用百度地图获取当前城市:https://www.jianshu.com/p/0819cfd46712 Vue2 :百度地图bmap:https://www.jianshu.com/p/ ...

  7. vue中引入百度统计

    vue作为单页面的,引入百度统计,需要注意不少. 一.基本的流量统计 在index.html 入口文件中引入百度统计生成的一连串代码: var _hmt = _hmt || []; (function ...

  8. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  9. 在vue项目中使用UEditor--plus

    1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护:程序员自发对其进行了维护,详见 ht ...

随机推荐

  1. SpringBoot HATEOAS用法简介

    REST风格简介 介绍HATEOAS之前先简单介绍一下REST,REST 是 Representational state transfer 的缩写,翻译过来的意思是表达性状态转换.REST是一种架构 ...

  2. jquery 往上滚动的时显示,上下滚动执行的js

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  3. Ubuntu 16.04下配置 Nginx 与 Node.js 以及服务的部署

    第一步:安装nginx sudo apt-get update sudo apt-get install nginx 如果遇到依赖问题,尝试执行sudo apt-get -f install命令 第二 ...

  4. MySQL基础篇(3)常用函数和运算符

    一.字符串函数(索引位置都从1开始) CONCAT(S1,S2,...Sn): 连接S1,S2,...Sn为一个字符串,任何字符串与NULL进行连接的结果都是NULL INSERT(str,x,y,i ...

  5. Java基础(一)对象构造

    由于Java对象构造非常重要,所以Java提供了多种编写构造器的机制. 1.重载 如果多个方法有相同的名字.不同的参数,便产生了重载.编译器必须挑选出具体执行哪个方法,它通过用各个方法给出的参数类型与 ...

  6. go map数据结构和源码详解

    目录 1. 前言 2. go map的数据结构 2.1 核心结体体 2.2 数据结构图 3. go map的常用操作 3.1 创建 3.2 插入或更新 3.3 删除 3.4 查找 3.5 range迭 ...

  7. sqlite复制表

    (1)复制表,并把原表的 所有记录都复制到新表里. CREATE TABLE newTb AS SELECT * FROM oldTb (2)只复制表结构,不复制数据到新表里. 注:该语句无法复制关键 ...

  8. mysql数据迁徙详解

    数据迁徙是每个后端都会遇到的工作之一,本文介绍了一些常见的数据迁徙方法与工具 mysqldump:数据结构不变的数据迁徙 导出数据 mysqldump -u root -p DATABASE_NAME ...

  9. Flink 从 0 到 1 学习 —— Flink Data transformation(转换)

    toc: true title: Flink 从 0 到 1 学习 -- Flink Data transformation(转换) date: 2018-11-04 tags: Flink 大数据 ...

  10. .NET Core 3.1 编写混合 C++ 程序

    前言 随着 .NET Core 3.1 的第二个预览版本发布,微软正式将 C++/CLI 移植到 .NET Core 上,从此可以使用 C++ 编写 .NET Core 的程序了. 由于目前仅有 MS ...