从前端路由到hash和history模式

路由

网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。
web里的话，路由概念也是类似的，解析一个‘端’URL（地址，可能包含了一些参数等）来将请求分配到指定的一个‘端’（控制器、方法等一切处理程序），客户端的请求是以URL的形式传递给服务器的（示例get方法），传统WEB开发中，URL对应服务器上某个目录下的某个文件。
而在MVC开发中，WEB 服务器会截获所有请求，不做资源存在性检查，直接转发给网站的路由程序。路由器再调用相关的控制器。控制器调用相关的服务，并返回视图对象。路由器再从视图对象中提取生成好的网页代码返回给Web服务器，最终返回给客户端。

1. 后端路由
   后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，它的好处与坏处都很明显：
   好处：安全性好，SEO好。
   缺点：加大服务器的压力，不利于用户体验，代码冗合。
   作者：Srtian
   链接：https://www.jianshu.com/p/d2aa8fb951e4
2. 前端路由
   也正是由于后端路由还存在着自己的不足，前端路由才有了属于自 己的一片天地与发展的空间。
   对于前端路由来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样，当访问不同的路径的时候，会显示不同的页面组件。前端路由主要有以下两种实现方案：
   ：hash
   ：history API
   当然，前端路由也存在缺陷：
   使用浏览器的前进，后退键时会重新发送请求，来获取数据，没有合理地利用缓存。但总的来说，现在前端路由已经是实现路由的主要方式了，我们常用的诸如vue-router等前端框架的路由控制都是基于前端路由进行开发的，因此将前端路由进行一个了解
   还是很有必要的。
   作者：Srtian
   链接：https://www.jianshu.com/p/d2aa8fb951e4

前端路由的诞生

前端路由的出现要从 ajax 开始，Ajax，全称 Asynchronous JavaScript And XML（异步的js和xml），是浏览器用来实现异步加载的一种技术方案。
在 90s 年代初，大多数的网页都是通过直接返回 HTML 的，用户的每次更新操作都需要重新刷新页面。及其影响交互体验，随着网络的发展，迫切需要一种方案来改善这种情况。
1996，微软首先提出 iframe 标签，iframe 带来了异步加载和请求元素的概念，随后在 1998 年，微软的 Outloook Web App 团队提出 Ajax 的基本概念（XMLHttpRequest的前身），并在 IE5 通过 ActiveX 来实现了这项技术。在微软实现这个概念后，其他浏览器比如 Mozilia，Safari，Opera 相继以 XMLHttpRequest 来实现 Ajax。不过在 IE7 发布时，微软选择了妥协，兼容了 XMLHttpRequest 的实现。

有了 Ajax 后，用户交互就不用每次都刷新页面，体验带来了极大的提升。

但真正让这项技术发扬光大的，还是后来的 Google Map，它的出现向人们展现了 Ajax 的真正魅力，释放了众多开发人员的想象力，让其不仅仅局限于简单的数据和页面交互，为后来异步交互体验方式的繁荣发展带来了根基。

而异步交互体验的更高级版本就是 SPA—— 单页应用。

（异步交互最高级的体验是什么？PWA（渐进式WEB应用）
什么是PWA
2019前端必会黑科技之PWA）

单页应用不仅仅是在页面交互是无刷新的，连页面跳转（如<a>标签）都是无刷新的，为了实现单页应用，所以就有了前端路由。

单页应用的概念是伴随着MVVM出现的。最早由微软提出，然后他们在浏览器端用 Knockoutjs 实现。但这项技术的强大之处并未当时的开发者体会到，可能是因为 Knockoutjs 实现过于复杂，导致没有大面积的扩散。

同样，这次接力的选手依然是 Google。Google 通过 Angular.js 将 MVVM 及单页应用发扬光大，让前端开发者能够开发出更加大型的应用，职能变得更大了。随后都是大家都知道的故事，前端圈开始得到了爆发式的发展，陆续出现了很多优秀的框架如vue，react。

https://github.com/hwen/blogSome/issues/2

前端路由的实现

前端路由的实现其实很简单。
从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）