单页面应用SPA的原理以及使用

使用SPA的原因是为了减少服务器压力，当我们切换页面时，会向服务器发送一个请求，请求返回一个html文件。如果使用SPA则每次更改url时，不需要再向服务器请求，只要通过本地的js来切换就可以了。并且服务器也不需要配置路由，前端来实现路由配置。
使用SPA可以增强用户体验，使用SPA时，更改url，直接刷新页面，js运行速度很快，用户体验很好。
SPA路由实现
1.使用Hash
window.location.hash
可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录
实例如下：

var path = "index";
window.location.hash = path;

通过 hash 对象改变url时，用 hashchange 事件监控页面路径 hash 变化更新页面：

window.addEventListener('hashchange',function(e){
          //路由发生改变时执行的事件...
        });

2.使用History
history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）
实例如下：

var path = "index";
history.pushState(null,null,'#/'+path);

通过 history 对象改变url时，可以通过 window.popstate 事件来监控浏览器前进后退时视图变化

window.addEventListener('popstate',function(e){
          //浏览器前进后退时执行的事件...
        });

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝
调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件.