讲把路由放在前端意味着什么海量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

当浏览器地址栏中的URL发生变化时，会请求对应的网络资源，而负责响应这个网络资源的服务就称

为路由。在早期的Web开发中，路由都是交由服务端处理，但随着前端技术的快速发展，路由模块逐

渐转移交给了前端进行控制，而路由转移到前端，正是前后端分离和单页应用架构的基石。这一

我们来深入理解前端路由的技术细节。

前端路由实现基础

默认情况下，当地址栏的URL发生变化时，浏览器会向服务端发起新的请求。所以实现前端路由的重

要基础就是在修改URL时，不引起浏览器向后端请求数据。根据浏览器提供的API，有下面两种实现方

案。

基于hash实现

前面提到当URL变化时浏览器会发送请求，但有一种特例，那就是hash值的变化不会触发浏览器发起

请求。

hash值是指URL“#”号后面的内容，通过location.hash属性可以读写hash值，这个值可以让浏览器

将页面滚动到ID与hash值相等的DOM元素位置，不会传给服务端。

要它的变化也比较简单，通过window对象的hashchange就可以感知到它的变化。

这种实现方式占用了hash值，导致默认的页面滚动行为失效，对于有滚动定位需求的情况需要自行手

动获取元素的位置并调用BOM相关API进行滚动。

基于history实现

HTML5提出了一种更规范的前端路由实现方式，那就是通过history对象。

history提供了两个函数来修改URL，即history.pushState()和history.replaceState()，这两个API可

以在不进行刷新的情况下，来操作浏览器的记录。唯一不同的是，前者是新增一个记录，后

者是直换当前的记录。

URL变化则可以通过window对象上的popstate来实现。但需要注意的是，

history.pushState()或history.replaceState()不会触发popstate，这时我们需要手动触发页面渲

染。

虽然能通过这种方式实现前端路由功能，但并不能浏览器默认的请求行为，当用户修改地址栏

时还是会向服务端发起请求，所以还需要服务端进行设置，将所有URL请求转向前端页面，交给前端

进行解析。

下面是vue-router官网的Nginx配置例子：表示对于匹配的路径，按照指定顺序依次检查对应路径文

件是否存在，对应路径是否存在，如果没有找到任何文件或，就返回index.html。而

index.html就会引入对应的JavaScript代码在浏览器端进行路由解析。

location/{

try_files$uri$uri//index.html;

}

路由解析

浏览器在URL变化时向后端发送请求，就需要对路由进行解析了。vue-router和react-

router都同时依赖了一个第库Path-to-RegExp进行路由解析，下面通过分析path-to-regexp1.8

版本的源码来理解路由是如何被解析的。

路由解析又分为两个操作：路由匹配和路由生成。

路由匹配

路由匹配就是当获取到请求路径后，如何找到对应的配置路径。在path-to-regexp源码中对应的是默

认导出函数pathToRegexp()，该函数接收3个参数：

path，必传参数，值可以为自定义的请求路径，如/user/:id，也可以是正则表达式，还可以是两

者组成的数组；

keys，可选参数，值为数组，数组元素为解析正则表达式风格的字符串或冒号开头的占位符

（下文简称为“特殊字符串”）生成的令牌，比如字符串/user/:id对应的keys为{name:id,

delimiter:/,optional:false,repeat:false}，这个参数的值最终会被保存到返回的正则表达式对

象的keys属性中，可用于后面的路由生成；

options，可选参数，执行过程中的配置信息，比如是否大小写敏感。

函数返回值是一个带有keys属性的正则表达式，key