SPA（single page web application） ，简单的说就是一个Web项目里只有一个HTML页面，利用JS动态的变换HTML的内容，从而来模拟多视图间跳转。
SPA提高了Web应用的交互体验，在与用户交互的过程中，不再需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示变得更加流畅。
什么是前端路由
Web 前端单页应用中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
简单的说，就是在保证只有一个HTML页面，且与用户交互时不刷新和跳转页面的同时，为SPA中的每一个视图展示形式匹配一个特殊的url，在刷新、前进、后退和SEO时均通过这个特殊的url来实现。改变url时不让浏览器向服务器发送请求，而且可以监听到url的变化。
前端路由的兴起就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面来实现的。
hash 模式
这里的hash就是指url后的#号以及后面的字符，由于hash值的变化不会导致浏览器向服务器发送请求，而且hash的改变会触发hashchange事件，浏览器的前进后退也能对其进行控制。
window.location.hash //获取当前的hash值
window.addEventListener('hashchange',function(){
//监听hashchange事件，用于改变url
}）
优点：完全前端路由，只改变#后面的值，无刷新。兼容性好，可以兼容到IE8；无需服务端配合处理非单页的url地址。
缺点：SEO不友好，看起来丑，会导致锚点功能失效。相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。
history模式
window.location.pathname//获取/路径字段
history.back()
history.go()
history.forward()//完成后退前进等操作
history.pushState();// 添加新的状态到历史状态栈
history.replaceState() // 用新的状态代替当前状态
history.state // 返回当前状态对象
popstate事件
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）。
history.pushState() 和 history.replaceState() 的区别在于：
- history.pushState() 在保留现有历史记录的同时，将 url 加入到历史记录中。
- history.replaceState() 会将历史记录中替换为当前页面 url。
由于 history.pushState() 和 history.replaceState() 可以改变 url 同时，不会刷新页面，会向服务端发起请求
