前端 router 原理

router 原理

单页面应用 SPA(simple page application) 的路由

在普通应用中, 可以使用a标签或者window.location.href直接修改 URL, 但是这样会使得浏览器重新像服务器进行请求并刷新页面.

在 SPA 中, 路由被用于描述 URL 与 UI 的映射关系, 这种关系是 URL 决定 UI 的渲染, 也是单向的. SPA 的核心思想之一就是只加载单独一个 HTML 页面, 并通过动态更新切换页面和内容而不重新渲染整个页面.

实现 SPA 时, router 提供了三种模式(mode)创建路由来管理路由. 使用了浏览器的History API.

hash mode

hash 模式在传递内部 URL 之前使用的#作为前缀, 即 http://example.com/#/home.

hash模式不需要服务器进行特殊的配置, 可以在任意静态服务器上运行. hash 模式对搜索引擎优化, 但是对SEO(搜索优化)不友好. 几乎兼容所有浏览器与服务器, 但是可读性与美观性较差.

hash模式使用的是hashchange事件(当 URL 的片段标识符更改时，将触发 hashchange 事件)来监听URL的变化的, 改变URL方式有:

• 浏览器的back、forward行为.
• 手动修改URL.
• 使用<a>标签改变 URL(包括锚点滚动).
• 使用window.location手动修改.

注意: 页面第一次加载并不会触发hashchange事件, 需要load或者DOMContentLoad事件监听.

history mode

history接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录.

html5的发布, history新增了pushState和replaceState, 这两个 API 可以使 URL 改变并不发送请求.

history中的go、back、forward方法都能触发popState事件.

因为是依赖于html5, 所以只兼容IE8+浏览器.

因为没有标识符#, 所以在刷新页面或直接进入任意URL时, 还是会给服务器发送请求, 所以我们需要对服务端进行配置, 把所有路由都重定向到根页面.

html5路由更符合传统多页应用的结构, 对SEO友好. 它使用pushState和replaceState来修改浏览器的历史记录.

memory mode

主要存储在 memory 中, 一般是在 node 环境下使用.

参考

• https://juejin.cn/post/6854573222231605256
• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/hashchange_event
• https://developer.mozilla.org/zh-CN/docs/Web/API/History