前端路由

1、前端路由

1、什么是前端路由

所谓的前端路由，拥有这样一种能力：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的试图页面。

2、为什么要用前端路由

首先，它的出现无疑减轻了服务器端的压力，特别是对于一个比较复杂的应用来讲，或者更确切的说，对于拥有一个复杂路由系统的应用来说，服务器端需要为一个不同的url执行一段处理逻辑在高并发的情况下实在有点不堪重负；其次，页面的切换可以不需要刷新整个页面，没有网络延迟，没有闪烁延迟，提升了用户体验。

3、前端路由实现方式

首先，前端路由是不依赖服务器的，所以我们在前端需要做的是：

• 在不改变页面的前提下实现url的变化。
• 捕捉到url的变化以便执行页面替换

在不改变页面的前提下如何实现url的变化？有两种方式：

• 使用url中的hash字段
• 使用html5中的history API: history.pushState和history.replaceState,两个API都会操作浏览器的历史记录，而不会一引起页面的刷新。
• hash就是url中看到的#，我们需要一个根据监听哈希变化触发的事件（hashchange）事件，我们用window.location处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面可以在hashchange事件中注册ajax从而改变页面内容。

4、优点

从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程会有延迟，而前端路由在访问一个新页面的时候仅仅是改变了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

5、使用场景

前端路由更多用在单页面应用上，也就是SPA，因为单页应用，基本上都是前后端分离的，后端自然也就不会给前端提供路由。
前端路由和后端的路由在实现技术上不一样，但是原理都是一样的，在HTML5的history的API出现之前，前端路由都是通过Hash来实现的，hash能兼容低版本的浏览器。

6、缺点

使用浏览器的前进，后退的时候都会重新发送请求，没有合理的利用缓存。