hash 模式
这里的hash就是指url后的#号以及后面的字符，比如说"www.baidu.com/#dhoarhiqw9…",其中“#dhoarhiqw9uw”就是hash值。
由于hash值的变化不会导致浏览器向服务器发送请求，而且hash的改变会触发hashchange事件，浏览器的前进后退也能对其进行控制。
window.location.hash //获取当前的hash值
window.addEventListener('hashchange',function(){
//监听hashchange事件，用于改变url
}）
优点：完全前端路由，只改变#后面的值，无刷新。兼容性好，可以兼容到IE8；无需服务端配合处理非单页的url地址。
缺点：SEO不友好，看起来丑，会导致锚点功能失效。相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。
google出了一种方式hashbang能够让服务求收到hash的请求，前提是需要在#号前面加上!号。类似于：baidu.com!#aaa，虽然这种方法是可行的但是依然不能和以前的SEO相比。
history模式
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
window.location.pathname//获取/路径字段
history.back()
history.go()
history.forward()//完成后退前进等操作
history.pushState();// 添加新的状态到历史状态栈
history.replaceState() // 用新的状态代替当前状态
history.state // 返回当前状态对象
history.pushState() 和 history.replaceState() 均接收三个参数（state, title, url）
- state：合法的 Javascript 对象，可以用在 popstate 事件中
- title：现在大多浏览器忽略这个参数，可以直接用 null 代替
- url：任意有效的 URL，用于更新浏览器的地址栏
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 同时，不会刷新页面，所以在 HTML5 中的 histroy 具备了实现前端路由的能力。
优点：在同源（需要后端服务器的配合，将所有前端路由渲染至一个页面）的情况下，实现了前端完全自由，stateObject可以是任何数据类型，URL可以是相对路径也可以是绝对路径。
缺点：如果后端没有做对应的路由，在刷新时会出现404。IE8以下不支持。
memory模式
memory 模式的实现不依赖于 url的变化，就是说，页面内容切换，url始终保持不变，实现方法就是使用 window.localStorage存储当前路径即可（把路径存在localstronge中，需要切换路由时就去localstronge中获取；改变路径的时候就将路径存在localsstronge中，因此url中的路径不会改变）。这种方式不适合网页应用，url 信息是存储到本地的，无法准确分享页面，因此只适合单机应用。在前端路由中一般不适用。
