Skip to main content

Module navigation

Module navigation 

Source
Expand description

站内导航:JS 协调器与 Leptos 路由器之间的握手。

JS 协调器 window.__routeTransitions(libs/yggdrasil-core/src/route-transitions.ts) 拥有 history 与视图过渡:它拦截站内链接点击与 popstate,在视图过渡的 update 回调里 写入 history,然后通知 Rust;Leptos 的 BrowserUrl 只负责“读 URL → 渲染”。

  • NavigationBridge:连接协调器,收到通知后把地址栏 URL 写入 BrowserUrl 的 URL 信号。
  • RouteMarker:包住路由出口,路由内容提交到 DOM 后通知协调器“已渲染”,并提供 use_rendered_route 所需的“已提交路由”。
  • RouteProgress:路由切换较慢时在页面顶端显示进度条。
  • push / replace / back / forward / external:程序化导航的唯一入口, 禁止使用 leptos_router::hooks::use_navigate 与 <A>。

悬停、聚焦、触屏按下站内链接时,协调器回调 NavigationBridge 交给它的预取闭包, 由 crate::route_prefetch 提前下载目标页面的分包。

站内链接一律是普通 <a href>;指向非 SPA 路由的链接(/feed.xml、/doc/...、 /uploads/... 等)必须带 rel="external"(或 download/target)。

Structs§

CommittedRoute 🔒
已提交到 DOM 的路由,由 RouteMarker 提供。
NavigationBridgeProps
Props for the NavigationBridge component.
RenderedRoute
一条路由地址:路径(不含查询串)与查询串(不含 ?)。
RouteMarkerProps
Props for the RouteMarker component.
RouteProgressProps
Props for the RouteProgress component.

Statics§

CONNECTED 🔒
协调器是否已连接(仅浏览器端 NavigationBridge 在整棵树水合完毕后置真)。

Functions§

NavigationBridge
连接 JS 协调器;放在 <Router> 内、<Routes> 前,不渲染 DOM。
RouteMarker
路由出口外壳:渲染 data-vt-route/data-vt-navigation 标记,并在路由内容提交后通知协调器。
RouteProgress
路由切换进度条:新页面的分包或数据加载较慢时,在页面顶端显示一条往复滑动的细线, 表明点击已生效。快速切换(不超过 300ms)不显示。
back
历史记录后退。协调器缺失时用 history.back()。
external
整页跳转到站外或非 SPA 地址。协调器缺失时用 location.assign。
forward
历史记录前进。协调器缺失时用 history.forward()。
push
站内跳转(新增 history 记录)。协调器未连接时退化为整页跳转;服务端为空操作。
replace
站内跳转(替换当前 history 记录)。协调器未连接时退化为 location.replace。
route_key 🔒
当前路由的“路径 + 查询”字符串,作为视图过渡协调器核对 DOM 的路由标记。
use_rendered_route
布局外壳应跟随的路由:当前显示在页面上的那一个,而不是地址栏。