Navigation API 无刷新导航与视图过渡协作实践

Navigation API 无刷新导航与视图过渡协作实践概述Navigation API 通过原生路由拦截与导航事件，提供不依赖框架的无刷新导航能力。结合 View Transitions 可获得共享元素过渡与状态保留的顺滑体验。关键参数/概念`navigation.addEventListener('navigate', handler)`: 拦截导航事件（链接点击、`navigation.navigate()`）。`NavigateEvent`: 含 `canIntercept`、`intercept({ handler })` 实现客户端处理与数据刷新。`navigation.navigate(url)`: 以编程方式触发导航。与 View Transitions 协作：`document.startViewTransition(() => navigation.navigate(url))`。实践/示例// 路由拦截与客户端渲染 if ("navigation" in window) { navigation.addEventListener("navigate", (event: any) => { if (!event.canIntercept) return; event.intercept({ handler: async () => { const url = new URL(event.destination.url); const content = await fetch(`/partial${url.pathname}`).then((r) => r.text()); document.querySelector("main")!.innerHTML = content; }, }); }); } // 与视图过渡协作（共享元素动画） document.querySelectorAll("a[data-vt]").forEach((a) => { a.addEventListener("click", (e) => { e.preventDefault(); const href = (e.currentTarget as HTMLAnchorElement).href; if (document.startViewTransition) { document.startViewTransition(() => navigation.navigate(href)); } else { navigation.navigate(href); } }); }); 验证方法兼容性：在 Chromium 系（Chrome 118+）与其他浏览器下验证 `navigation` 是否存在，降级到传统跳转。性能：对比传统全量刷新与拦截加载的 TTFB/INP；观察动画连续性与状态保留。注意事项SEO 与历史：确保 `event.transitionWhile`/客户端渲染后正确更新标题与 `history` 状态。安全：拦截逻辑需校验 URL 并限制同源，避免开放重定向。