什么是前端路由？

路由，引导、指路之意。

所谓的前端路由，是这样：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。

为什么出现前端路由？

在Ajax还未出时，路由的工作交给了后端。在进行页面切换的时候，浏览器发送不同的url请求；服务器接收到浏览器的请求时，通过解析不同的url去拼接需要的html或者模板，然后将结果返回给浏览器端进行。

它的好处是安全性更高，更严格得控制页面的展现。这在服务器端可以为每一步流程添加验证机制，只有验证通过才返回正确的页面。但是另一方面，后端路由增加了服务器端的负荷，并且需要重载页面，用户体验不佳。

所以，前端路由应运而生。因为它正好可以解决上述痛点：

• 减轻了服务器端的压力。特别是对于一个比较复杂（拥有一个复杂路由系统）的应用来说，服务器端需要为每一个不同的url执行一段处理逻辑在高并发的情况下确实不堪重负。

• 页面的切换不需要刷新整个页面了，没有网络延迟，没有闪烁刷新，提升了用户体验。

实现方式

分成两步来实现：

1. 在页面不刷新的前提下实现url变化

2. 捕捉到url的变化，以便执行页面替换逻辑

在页面不刷新的前提下实现url变化

• hash方式，url的组成部分有很多，譬如协议、主机名、资源路径、查询字段等等，其中包含一个称之为片段的部分，以#为标识。当你改变hash的时候，你会发现URL变了，但是页面并没有刷新。

• history API，HTML5引入了一个history对象，包含了一套访问浏览器历史的API，可以通过window.history访问到它。这里主要考虑这个对象的两个方法：

都是对浏览器的历史栈进行操作，将传递的url和相关数据压栈，并将浏览器地址栏的url替换成传入的ur

• 注意，低版本的浏览器对于history API的兼容性不好，比如IE8

捕捉到url的变化，以便执行页面替换逻辑

采用事件监听机制，跟踪url的变化。

• 对于hash方式的前端路由，通常可以监听 hashchange 事件，在事件回调中处理相应的页面视图展示等逻辑。

• 调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发, 比如点击后退按钮（或者在JavaScript中调用 history.back() 方法）。

应用

前端路由大部分的应用场景，就是我们现在熟知的单页应用SPA。并且，前端路由是需要建立在已经打开了一个初始页面基础之上的，然后才能在这个页面之内进行页面替换。所以，至少要向后端发送一次http请求，接收所需要加载的页面。这也意味着，需要和后端确认各自的分工，哪些url归前端解析，哪些归后台解析。