JavaScript / 前端 · 1月 16, 2021 0

前端路由的原理

路由

路由,在计算机领域各个分领域,都有应用。最基础的,是计算机网络中的路由。

均为个人理解,不保证正确

网络路由

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。

按照我的理解,数据从一台设备到另一台设备进行传输,进行路径选择的过程即为路由。

路由表存储着指向特定网络地址的路径,意思就是选择传输路径时,总要有一些的路径信息可选,这些信息就是路由表。

后端路由

当客户端执行网络请求时,服务端会根据内部的路径解析配置表(即为路由表),触发不同的行为,这个过程就是路由。

特殊的,当所有的行为都只是返回静态资源时,也就是一个静态资源web服务器,本质上就和网络路由一样。一个强调的是不同设备之间,一个是同一传输链路的不同行为。

前端路由

我们知道,后端路由是客户端不同路径请求,服务器触发不同行为的过程。

特殊的,如果把返回不同静态资源这一个分任务拦截在前端,让客户端完成后端路由的部分功能,这就是前端路由。

这就出现了当下的情况,前端SPA应用,负责路由页面渲染,后端负责数据操作行为,这就是前后端分离

至于未来,前端会不会承担数据部分,那就不得而知了,相信会有那一天的。

前端路由

既然要完成路由的功能,首要的就是找到一个路径变化的基准。可以是url的哈希部分,也可以是url的path。这就涉及到路由的模式。

哈希路由

以url的哈希部分作为变化基准。这样做是因为:

  1. 哈希部分的变化不会像后端发送请求
  2. 可以监听到哈希的变化
  3. 可以前进后退,触发浏览器历史。

vue 和 React 都实现了哈希路由,能够保持路由和哈希值的同步,其原理都是一样的:

调用history.pushStatehistory.replaceState,来更新url。

虽然哈希部分有自己的监听方式hashchange ,但是vue和react都是用的 History API,并不会触发该事件。

History 路由

以URL的path部分作为变化基准,这需要基于 History API

Vue 和 React 都实现了此模式。

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。这就可以控制页面跳转,为前端路由提供了便利,而且这种方式让url更像一个url。

原理:

  1. 监听 popstate,以监听浏览器的前进后退,更改页面渲染。
window.addEventListener('popstate', function(e) {
  console.log(e)
});
  1. history.pushState 和 history.replaceState 手动操作浏览器记录,以实现更新url。

这种模式通常需要服务端做一些调整,因为path的变化会向后端发送请求。

其他模式

这一般用于非浏览器环境下,没有相关的API。这种模式,无法时间浏览器的前进和后退(通常也不需要了,大多数是node环境或者App环境,RN)

Vue 的 abstract 模式

abstract模式是不依赖于浏览器环境,所以没有使用hash或者history等浏览器才会提供的API,而是VueRouter内部使用数组进行模拟了路由管理,在node环境,或者原生App环境下,都会默认使用abstract模式,VueRouter内部会根据所处的环境自行判断,默认使用hash模式,如果检测到没有浏览器API的时候,就会使用abstract模式。

React 的 MemoryRouter

MemoryRouter 组件模式和 Vue 的 abstract 模式类似,把路由信息放在内存中。

路由框架

基于上述原理,下一步要做的就是,统一调度,保持各种实现方式的外部一致性,这就是框架的能力了。

冀ICP备19028007号