问题描述:

我们知道一般的百度统计代码是添加在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. 解决Cannot change version of project facet Dynamic Web Module to 3.1

    Open web.xml from project structure http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version= ...

  2. Ajax学习--理解 Ajax 及其工作原理

    Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...

  3. What is the !! (not not) operator in JavaScript?

    What is the !! (not not) operator in JavaScript? 解答1 Coerces强制 oObject to boolean. If it was falsey ...

  4. Emacs Python 自动补全之 jedi

    jedi jedi 的安装配置并不是很友好.github 上也没有明确说明.查了很多资料, 最后才配置成功.可是效果却不是很理想.在补全的时候有明显的卡顿现象. 不知道网上这么多人对其推崇备至是因为什 ...

  5. 老白关于rac性能调优的建议

    RAC应用设计方面需要在底层做很有设计.虽然ORACLE的售前人员总是说RAC的扩展性是透明的,只要把应用分到不同的节点,就可以平滑的扩展系统能力了.而事实上,RAC的CACHE FUSION机制决定 ...

  6. 如何获取当前包名与activitity&&抓log

    若hi1:获取当前包名以及Activity (1)adb shell dumpsys activity | find "mFocusedActivity" (2)adb shell ...

  7. Stream流实现斐波那契数列

    1.前言 我们都知道斐波那契数列有很多种实现方法,在jdk1.8以前没有流操作,只能通过递归或者迭代等其他方式来实现斐波那契数列, 但是jdk1.8以后,有了流操作,我们就可以使用流来实现斐波那契数列 ...

  8. github局部不同图片合并插件

    用于解决游戏开发时,一套图里有局部地区图片不同其他地方相同,导致资源重复过大的问题 地址:https://github.com/Elringus/SpriteDicing

  9. python学习之内存驻留机制简述

    第四章 4.1 小数据池 4.1.1 代码块 一个模块,一个函数,一个类,甚至一个command命名都可以称之为一个代码块. 官方解释: A Python program is constructed ...

  10. 如何理解springcloud微服务项目中,eureka,provider,consumer它们之间的关系?

    eureka负责注册provider和consumer的服务信息 provider负责与数据库进行交互,实现数据持久化,并给consumer提供服务 consumer与前端交互,通过与Eureka同源 ...