单页面

1 单页面简介

1.1 单页面定义：

单页面应用（SPA，Single-page Application）指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入。

1.2 单页面和多页面的区别：

相比之下，传统的多页面应用每个页面（只说动态页面）都是使用服务器端模板编写，然后请求这个页面的时候由服务器渲染成 html 再返回。两者对比，一个很明显的区别就是，多页面应用的 server 端要干两件事：提供数据+渲染，而单页面应用把渲染拿到浏览器端做了，服务器只提供数据就可以了。

1.3 单页面特点：

单页面不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作，操作过程中不进行页面跳转，url 地址栏#后面的字符在不停变化，且每一次变化，页面会跟随着实现局部刷新，呈现出不同的内容。

1.4 常用框架：

Angular / Vue / React / Ionic / Backbone 等。

1.5 查看一个页面是否是单页面的方式：

F12，Network，当 url 改变时看资源是否被刷新了一遍。

2 单页面中的页面浏览事件采集($pageview)

第一种 自动模式 配置参数 is_track_single_page (推荐使用这种模式)，默认值为 false ，表示是否开启自动采集 web 浏览事件 $pageview 的功能 其原理是修改 window 对象的 pushState 和 replaceState 原生方法，在页面的 url 改变后自动采集 $pageview 事件，若用户浏览器不支持这两种方法或者是使用 hash 的路由模式，我们也会监听 popstate 和 hashchange 事件来自动触发 $pageview 事件

//SDK版本1.12.18以上支持，默认值为false
is_track_single_page:true

//注意默认的： sa.quick('autoTrack') 是需要的

第二种 手动模式 在页面切换的时候，手动调用 sensors.quick('autoTrackSinglePage') 来采集 web 浏览事件 $pageview ,这个方法在页面 url 切换后调用

// 比如现在是在 react 中可以在全局的 onUpdate 里来调用
onUpdate: function(){
    sensors.quick('autoTrackSinglePage');
}

  //vue 项目在路由切换的时候调用
router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sensors.quick("autoTrackSinglePage");
    });
});
//注意： vue下因为首页打开时候就会默认触发页面更细，所以需要去掉默认加的 sa.quick('autoTrack')

此方法也可添加自定义属性，

sensors.quick("autoTrackSinglePage",{platForm:"H5"});

3 单页面的页面标题 $title 问题

对于单页面项目，神策 SDK 全埋点的预置事件采集的页面标题属性，可能存在异常 title 可能没有设置，或者设置的时机晚于我们发送数据的时机