前端路由的概念相对于后断路由而言的，好了问题来了，什么是前端路由？什么又是后断路由？他们之间有什么关系？
后端路由阶段
路由这个概念，是后端先出现的，所以，要想彻底了解前端路由，就需要理解后端路由。
在Web发展的早期，我们的一个url请求长这样
http://hometown.xxx.edu.cn/bbs/forum.php
有时还会有带`.asp`或`.html`或`.jsp`的路径，这就是所谓的SSR(Server Side Render)，通过服务端渲染，直接返回页面。典型的工作流程式这样：
- 浏览器发出请求
- 服务器通过端口（通常是80）监听到发送的请求，解析url路径
- 服务器根据服务端路由的配置，返回相应的资源，这些资源可以是json数据，图片等
- 浏览器根据数据包的Content-Type来决定如何解析数据
可以看到，前端并不负责任何渲染或者路由方面的工作，这些事情都由后端完成了。这样做的好处就是前端省事，不过缺点就是后端会很忙，另外，后端开发工程师也必须要处理前端的代码，在前端的代码里面嵌入后端逻辑。
请求的流程看起来是这个样子的
前端路由阶段
前端的发展经过了几个阶段，在前端的早期，采用的是纯后端路由，但是这种方案每次请求都要重新刷新页面言重的影响着交互体验而且对于开发人员并不友好。随着网络的发展，迫切需要一种方案来改善这种情况。Ajax，全程Asnchronous JavaScript And XML，就是这样一种技术解决方案。
1998年，微软的技术团队提出Ajax的解决方案，并在IE5通过ActiveX来实现了这项技术，在微软之后，其他的浏览器也相继通过XMLHttpRequest来实现了Ajax。
有了Ajax技术，用户交互就不用每次都刷新页面，体验带来了极大的提升。但是真正让这项技术发扬光大的，还是后来Google。Google借助该技术开发了一系列大名鼎鼎的应用，比如Gmail，Google Map等，这些应用的出现向人们展示了Ajax技术的强大和魅力，真正释放了众多开发人员的想象力，让其不仅仅局限于简单的数据交互和页面展示，为后来的异步交互式体验方式的繁荣发展带来了根基。
前后端分离阶段
有了Ajax技术，前端渲染就变成可能了，后端只需要提供API即可，格式随意，目前流行的是Restful API。
我们来看下图，这是典型的前端渲染架构图。
每次请求涉及到的数据，会使用Ajax从通过API的形式从后端请求过来。
每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染。这就是所谓的前端渲染。需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件。同时可以看到，和之前的后断路由不同，这时后端只是负责提供API了。
后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中. p这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上. p并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可. p目前很多的网站依然采用这种模式开发.
这就是所谓的前后端分离，总结如下：
- 随着Ajax的出现, 有了前后端分离的开发模式
- 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中
- 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上
- 并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可
- 目前很多的网站依然采用这种模式开发.
单页面富应用阶段（SPA）
架构图如下，和之前的前后端分离的结构，客户端每次请求都要向静态资源服务器请求数据不同，这次是一次请求获取全部数据，然后在客户端进行路由，这就是所谓的前端路由。这个阶段就是所谓的单页面富应(SPA)阶段。
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。也就是前端来维护一套路由规则.。
前端路由的两种实现方式
1.Hush
hash路由一个明显的标志是带有#,我们主要是通过监听url中的hash变化来进行路由跳转。
hash的优势就是兼容性更好,在老版IE中都有运行,问题在于url中一直存在#不够美观,而且hash路由更像是Hack而非标准,相信随着发展更加标准化的History API会逐步蚕食掉hash路由的市场。
2.History
下面是常见的几个api,请去MDN-History查看。
- window.history.back(); // 后退
- window.history.forward(); // 前进
- window.history.go(-3); // 后退三个页面