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 并限制同源，避免开放重定向。