前言：
路由这概念最开始是在后端出现的，在前后端不分离的时候，由后端来控制路由，服务器接收客户端的请求，解析对应的url路径，并返回对应的页面/资源。简单的说，路由就是根据不同的url地址来展示不同的内容或页面。
现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，虽然Ajax解决了用户交互时体验的痛点，但是多页面之间的跳转一样会有不好的体验，所以便有了spa(single-page application)使用的诞生。而spa应用便是基于前端路由实现的，所以便有了前端路由。
路由的实现方式：
路由需要实现三个功能：
- 当浏览器地址变化时，切换页面；
- 点击浏览器【后退】、【前进】按钮，网页内容跟随变化；
- 刷新浏览器，网页加载当前路由对应内容；
在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式：
- hash模式：监听浏览器地址hash值变化，执行相应的js切换网页；
- history模式：利用history API实现url地址改变，网页内容改变；
两者之间的区别就是hash会在浏览器地址后面增加#号，而history可以自定义地址。
路由的实现：
hash模式：
早期的前端路由的实现就是基于location.hash来实现的。其实现原理也很简单：
hash的几个特性：
- hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。
- 散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面。
- 监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值。
- hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
- location.hash值的变化会直接反应到浏览器地址栏。
hash的改变方式： 使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。
- 通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生改变，从而触发hashchange事件。
<a href="#user">srtian</a>
- 直接使用JavaScript来对loaction.hash进行赋值，从而改变URL，触发hashchange事件。
location.hash="#user"
window.addEventListener('hashchange', e => {});
- 直接通过输入url链接或者修改链接进行跳转。
大概的流程：
history模式：
hash虽然也很不错，但使用时都需要加上#，并不是很美观，因此HTML5又提供了History API来实现URL的变化。
- window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。
- History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口浏览网址的记录。
- 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
- 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。
主要属性：
- History.length：当前窗口访问过的网址数量（包括当前网页）
- History.state：History 堆栈最上层的状态值
主要的API：
- History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
- History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
- History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。
- History.pushState()：用于在历史中添加一条记录。pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有变化。
- History.replaceState()：用来修改 History 对象的当前记录，用法与 pushState() 方法一样。
window.history.pushState(null, null, "http://www.baidu.com");
window.addEventListener('popstate', e => {});
history的几个特性：
- 状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，都会触发popstate事件，并能在事件中使用该对象。
- 标题（title）：一般浏览器会忽略，最好传入null。
- 地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
popstate 事件： 每当 history 对象出现变化时，就会触发 popstate 事件。
注意：
- 仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件。
- 只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。
- 该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
- 页面第一次加载的时候，浏览器不会触发popstate事件。
大概的流程：
