闲聊一下

先说什么是路由，简单一点来讲，你输入一个 url，会拿到一个资源，路由在其中的作用就是，保证你输入特定的 url 拿到的是特定的资源，而不是胡乱分配的。
服务器就像一个资源池，url 里域名的作用是找到这个资源池，然后斜杠后面才是具体这个资源池里面的内容。早期路由的匹配是完全由后端控制的，url 上请求这个资源池里的什么东西，后端就返回对应的资源到浏览器。但是在这种情况下，每次我进入到一个新的页面，就会有浏览器的刷新。
前端路由应运而生。前端路由让页面的跳转只在前端做操作，不需要服务器返回给我们全新的资源文件，实现无刷新的页面跳转。
一开始的前端路由是基于 # 的 hash，在路由后面加上 # 不会重新请求服务器，而前端代码通过不同的 hash 值来判断显示不同的页面，这样就实现了简单的前端路由。在 # 后面的内容发生改变的时候，会触发一个 hashchange 事件，前端代码给这个 hashchange 事件添加监听函数，在监听函数内部做路由匹配，简单来讲就是：当你匹配到 #aaa 的时候，给它返回 aaa.html；当你匹配到 #bbb 的时候，给它返回 bbb.html。这样的步骤从后端转向了前端。
而由于 # + 实际路由 的丑陋，在 2014 年 HTML5 技术的提出后，History 成了我们常用的方式。
window.history 对象提供了 pushState 方法，让开发者可以在修改 url 的时候避免页面刷新问题。而这种方法需要后端的支持，后端需要把所有不明意义的 url 重定向到首页，交给前端来处理而不是让浏览器自动识别为 404。

两种路由总结

1. hash 模式，可以通过 window.location.hash 来改变 url，通过 hashchange 事件监听 url 的改动来做页面展示的处理。demo 点这里。
2. history 模式，在用户点击页面按钮的时候使用 window.history.pushState(null, ‘’, ‘url’) 修改 url，同时对页面的展示进行处理；添加页面 onload 事件在用户主动修改 url 的时候通过判断 window.location.pathname 来对页面的展示进行处理。demo 点这里。

另，结合 react 看前端路由可以看我的另一篇博客 ReactRouter使用指南

参考资料

前端路由的前生今世及实现原理