问题描述:

我们知道一般的百度统计代码是添加在html的head里的;但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面,

统计代码如果放在项目里的index.heml的head里,我们就只能统计到整个项目的入口流量,其它内页无法实现统计。而且目前项目需要根据

不同的业务和城市添加对应的统计代码;那么只能采取下面的方法:

实现方式:

1、封装一个全局变量文件,每个城市下面对应所有业务,每个业务对应一个方法里面放统计代码。

2、在项目入口文件里的methods内封装一个方法,方法内部根据当前页面的业务与城市,遍历全局变量里找出对应的统计代码;然后执行;

3、页面首次加载时调用该方法添加对应的统计代码:

4、当我们切换城市或者跳转路由时,url肯定会发生变化,所以我们需要监测url发成变化,再调用statisticsCode()   方法;我们就完成了城市或者业务变化添加对应的统计代码。

vue单页应用中根据不同城市不同业务添加百度统计代码的更多相关文章

  1. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  2. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  3. Wordpress网站中添加百度统计代码

    百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...

  4. vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  5. vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  6. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  7. vue单页应用添加百度统计

    前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...

  8. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  9. 【前端vue开发】vue单页应用添加百度统计

    前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...

随机推荐

  1. Hibernate理解?

    (1)Hibernate是对象关系映射框架,对JDBC进行非常轻量级的对象封装,是全自动的ORM框架,可以自动生成SQL语句.自动执行. (2)语言特点 <1>将对数据库的操作转换为对Ja ...

  2. PriorityQueue源码阅读

    最小堆:优先级权重越小 离顶点越近 案例 实现一个top max n publish static int[] topN(int[] nums, int l){ int[] result = new ...

  3. kkfileview v2.0 发布,文件在线预览项目方案

    kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...

  4. 自动化框架Quantum Automation Framework+cucumber+perfecto

    名词解释 Quantum: 一款基于JAVA的自动化框架,支持手机和桌面WEB的自动化测试.与cucumber和perfecto实现了整合,用于BDD自动化. Refer: http://projec ...

  5. DPM(物体检测)

    1.DPM(物体检测流程) 1.计算DPM特征图 2.计算响应图 3.使用SVM对响应图进行分类 4.对最后的选框做局部检测识别 DPM的梯度提取方向,将图片中的四个区域进行区分,将有符号梯度方向从0 ...

  6. 自定义View饼状图的绘制

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  7. JavaScript日常学习4

    JavaScript事件 1.<button id="btn1" onclick="document.getElementById("btn1" ...

  8. oracle数据字典视图

    数据字典的概念       还记得我们在手工建库的时候,运行的两个脚本文件.一个是catalog.sql,另一个是catproc.sql.catalog.sql是用来创建数据库的内部字典表的.catp ...

  9. JavaScript权威指南(第六版) 初读笔记

    JavaScript的5种原始类型:undefined.null.布尔值.数字和字符串. JavaScript中两个非常重要的数据类型是对象和数组. 通过方括号定义数组元素和通过花括号定义对象属性名和 ...

  10. 精通CSS:高级Web标准解决方案(第二版) 初读笔记

    2.1 常用的选择器 1. 类型选择器  p { color: black; } 2. 后代选择器  blockquote p { padding-left: 2em; } 3. ID选择器  #in ...