1. 路由是什么？
Google上搜索routing出来的结果是：Routing refers to establishing the routes that data packets take on their way to a particular destination. This term can be applied to data traveling on the Internet, over 3G or 4G networks, or over similar networks used for telecom and other digital communications setups. Routing can also take place within proprietary networks.
而我们熟悉的路由器，干的活就是把数据从一个地方传送到另一个地方，肩负着把数据包导向正确目的地址的重任。
接下来进入正题，是本文主要讲述的前端路由。
2. 前端路由
前端路由的由来
在Ajax还未出现之前，路由的工作是后端在做。在进行页面切换的时候，浏览器发送不同的url请求，服务器接收到浏览器的请求时，通过解析不同的url去拼接需要的Html或者模板，然后将结果返回给浏览器端进行渲染。
服务器端路由的好处是安全性更高，更严格地控制页面的展现。这在某些场景中是很有用的，比如下单支付流程，每一步只有在上一步成功执行之后才能抵达。另一方面，后端路由无疑增加了服务器端的负荷，并且需要reload页面，用户体验不佳。这样，前端路由就有用武之地了。首先，它能减轻服务器端的压力。特别是对于一个比较复杂的应用（或拥有复杂路由系统的应用）来讲，服务器端需要为每一个不同的url执行一段处理逻辑，在高并发的情况下实在有点不堪重负。其次，页面的切换可以不需要刷新整个页面了，没有网络延迟，没有闪烁刷新，提升了用户体验。
在 Ajax 推出后，局部刷新的特性，让用户交互不用每次都刷新页面，用户体验带来了极大的提升。而进阶版 SPA（单页面应用）出现后，带来了更高的异步交互体验，SPA不仅仅在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现SPA，所以就有了前端路由。
前端路由是什么
本人理解中，简单来说，路由就是解析url，调用相对应的处理程序（或传递参数），从而渲染不同的内容或页面。如下：
前端路由的实现
（1） hash：主要基于锚点的原理实现，简单易用。
优点：实现简单，兼容性好（兼容到ie8）；大部分前端框架都提供了hash路由的实现方式；不需要服务端进行任何设置和开发；除了资源加载和ajax请求之外，不会发起其他请求。
缺点：对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据；服务器端无法准确跟踪前端路由信息；需要锚点功能的需求会与目前路由机制冲突。
（2） browser： 使用Html5里的history api，通过监听popstate事件来对dom进行操作，每次路由变化都会引起重定向。
优点：重定向过程中不会丢失url参数，后端可以拿到这部分数据；大部分前端框架都提供了browser的实现；后端可以准确跟踪路由信息；可以使用history.state来获取当前url对应的状态信息。
缺点：兼容性（只兼容到ie10）；需要后端支持，每次返回html文档。
（3） memory：在内存中维护一个堆栈用于管理访问历史的方式，比较复杂。早期移动端使用比较多。实现麻烦，问题也较多，现在很少有使用。React Native使用这种路由模式。
优点：不存在兼容问题，路由保存在内存中；不需要服务器端提供支持。
缺点：现在很少有前端路由提供对memory路由的实现(除react-router)；自己实现难度较大；对于前进后退操作的路由管理非常麻烦，尤其是android设备的backbutton。
（4） static：主要用于ssr（服务端渲染），需要后端去管理路由。
着重介绍目前单页面应用使用的hash和history api两种方式：
hash
www.baidu.com/##/ 就是 hash url，当 ## 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 url 的变化，从而进行跳转页面。
实例：
history api
HTML5标准发布之后。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。还有 onpopstate 事件，通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务端的支持，需要把所有路由都重定向到根页面。
实例：
前端路由的优缺点
优点
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
在单页应用里，大部分页面结构不变，只改变部分页面内容时，可以使用前端路由。
未完待续...