@barefootjs/路由器
后端-不可知,为BarefootJS逐步增强客户端路由器. 这个 拦截同源导航,获取 普通全页 HTML 任意 后端已经返回( 没有协议头, 没有 JSON 端点), 仅交换 页 次 区域并处理/再水合物 仅仅是其中的岛屿。 壳 保留挂载; 区域外的一切都保持其DOM, 滚动和状态.
import { startRouter } from '@barefootjs/router'
startRouter() // install once on the client
在您的布局中标记可互换区域 <Region> (编为:
[bf-region],参见 spec/router.md);路由器互换了第一个匹配.
公共 API
startRouter(options?): Router- 安装一次; 回返{ stop, navigate, prefetch }。 。 。 .navigate(href, { history? }): Promise<void>——方案导航.BF_REGION- 货物再出口bf-region标记服务器侧助手.
选项
| 选项 | 默认 | 目的 |
|---|---|---|
region | [bf-region] | 交换点的选择器 |
rehydrate 编号 : dispose | 运行时间倒转链 | 超过岛屿生命周期 |
loadModule | import(src) | 岛屿模块如何加载 |
shouldIntercept | 同源, 直接点击 | 每个锁定者选择退出(data-bf-router="false", (中文(简体) ), download, (中文(简体) ), target, (中文(简体) ), rel=external(中文(简体) ) |
prefetch 编号 : prefetchDelay | true 编号 : 65 | 盘旋/ 聚焦/ 指针倒置 + modulepreload |
cacheFreshMs 编号 : cacheStaleMs 编号 : cacheCap | 15000 编号 : 60000 编号 : 30 | SWR + LRU 缓存 |
scrollToTop | true | 互换后立即向上滚动( ignores) scroll-behavior: smooth(中文(简体) ) |
manageFocus | true | 将焦点移入互换内容( 首个互换区域, 标题) + 宣布路径 |
morph | true | 保护 [data-bf-permanent] 横跨互换的活节点(无时不开放); false 强制平原 replaceChildren |
默认更正
客户端运行时间是 选项对等点:完全静止的外壳
0 的路由器 @barefootjs/client当岛屿存在时, dispose 财务报告和审定财务报表
rehydrate 在同一倒转链中降解
(单位:千美元)window.__bf_* 缝合 □ @barefootjs/client/runtime是因为
disposeScope编号 :rehydrateScope永远不要沉默不语 没有选择权
设置步骤.
行为
- 最后赢 跨越相重叠的导航(较新的导航中止了老年人).
- SWR 缓存 存储承诺(预选 + 点击共享一个请求); 年龄 条目立即服务并在背景中刷新; 失败不会被缓存 .
- 模块意识:一个响应的新岛屿模块被导入 在此之前 页:1 再加水再行走,然后在航行中除尘.
- 重定向意识:历史承诺在响应的最终URL上.
- 页面主播保留浏览器: 同页
#hash链接不是 被拦截的,还有popstate浏览器为它起火(和用于 反向/前向这些条目之间)无任何交换——页面已经 显示, 因此保留岛国和滚动位置 . - 历史、国家保存: 路由器取代合并而不是分解 已存在状态(螺旋-恢复 libs,框架状态).
- A11y (英语):焦点移动到互换的内容中——第一个互换的区域 在标题上有一个标题——新标题以礼貌方式宣布 生活区。 因此,兄弟地区可以维持其自然文件秩序 (通航先于内容) 无焦点登陆通航.
- 主元数据:标题、说明、,
og:编号 :twitter:{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}犬科医生和朋友 与接入的页面对齐; 头 资源 (见下文). - 持久性 (单位:千美元)
data-bf-permanent: 标记的元素<div data-bf-permanent="player">保留它 现场直播 交换的节点 状态、媒体回放、卷轴和水合瞄准镜存活下来——相匹配 按属性值(或id) (中文(简体) ). 在未标出元素时禁用; 通过morph: false做一个简单的交换. - 在飞行中交换 (单位:千美元)
data-bf-navigating: 设置<html>有效期 a 区域交换。 新加价是互换 在此之前 再给它浇水,所以 "在DOM中存在"和"互动"是两个瞬间——直到这个澄清,a 互换入岛可能仍然是服务器标记,没有处理器,点击 它不见了。 用于加载指示器的样式, 或等待其缺失 在驱动新内容之前.NAVIGATING_ATTR被导出, 因此调用者不需要 硬码字符串。 查询唯能导航无所取换而未设.
<head>:元数据调和,资源没有
一个地区是一个 机构 树,所以 <head> 不交换批发。 它会分裂
分两分,就整个合同.
页面元数据——在每次互换时调节,始终
页面元数据被定义为页面范围,所以路由器带来一个已关闭的
根据收到的文档列出允许列表。 总是这样
无法禁用它: stale <meta name="description"> 你错了
无法看见 正在开发( 不同于标签标题), 而此软件包不
离开这班的选入.
| 头节点 | 键 |
|---|---|
<title> | —— 说 |
<meta name="description | keywords | robots | author | theme-color"> | name |
<meta property="og:*"> 编号 : <meta name="twitter:*"> | name 或者说 property |
<link rel="canonical | alternate | prev | next"> | rel + 键 hreflang编号 :type编号 :media |
两个文档中的一键被替换(当节点已经相等时跳出, 因此,跨路共享的元数据不会导致 DOM churn; 仅在 输入的页面被添加; 仅在活页中的密钥是 删除,所以它无法 漏入以后的每一个路线.
任何没有钥匙在桌子上的东西 都不会被读取、替换或删除
运行时间注入分析标记, CSP <meta http-equiv>, (中文(简体) ), <link rel=preconnect>
朋友通过建筑是安全的。 (这是故意与
Turbo,它移除了所有未跟踪的头部元素. ) 打开一个节点
data-bf-head="false" 当页本身拥有它.
头资源——未动用
<link rel="stylesheet">, (中文(简体) ), <script>,以及 <style> 内 <head> 独自一人
两个方向。 不是疏忽, 资源寿命不能来自
文档。 贝壳,一个 [data-bf-permanent] 节点、门户或
超过这个区域的岛屿 仍然可能取决于下一页的页
不列出,所以"下游出没"不是"不再需要"的证据.
这说明 路由范围样式表 <head> 一个真正的陷阱:
导航 输入 路由使其无法样式化( 重新装入“ 修补” , 而
将调查指向缓存或建筑物而不是导航)
导航 关闭 保留工作表的链接, 因此它的规则适用于每个路径
后结.
放进去 内部 以互换方式进出的区域:
<Region>
{isEditor ? <link rel="stylesheet" href="/editor.css" /> : null}
{children}
</Region>
rel="stylesheet" 每个 HTML 是正文, 所以这是有效的, 这是正确的
根据区域交换合同安排,而不是绕行。 得到两个订单
对 建筑业 (工作表是随其样式和内容而插入的)
用它去除,在航道上没有等待负载。 工作表为
真正的全球停留在 <head>永远不要碰他们 这正是你
想要吗.
范围
A 类 单一作者区域 (范围最广) [bf-region] 匹配),通过
默认. searchParams() (仅限航行而不进行互换)
@barefootjs/client (v0.5); 路由器通过 __bf_pushSearch
连接,所以一旦有消费者在场,只使用查询导航短路.
data-bf-permanent 持久性为 v1. 编译器 筑巢 区域
(最深分互换,兄弟会主-详细)为v2.