Navigation API：无刷新导航拦截与视图更新

--- title: Navigation API：无刷新导航拦截与视图更新 keywords: - Navigation API - navigation.onnavigate - SPA/MPA - 视图更新 - 路由拦截 description: 介绍 Navigation API 的事件与拦截机制，在 MPA 中实现无刷新导航与视图更新，提升可访问性与性能，替代历史的 popstate/hash 方案。 date: 2025-11-27 sources: - https://developer.chrome.com/docs/web-platform/navigation-api/ - https://web.dev/navigation-api/ - https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API categories: - 应用软件 - 编程开发 --- # 概述 Navigation API 提供统一的导航事件与拦截流程，在 MPA 中实现无刷新页面更新与过渡。与 View Transitions 协同可获得更平滑体验。 ## 使用（已验证） - 监听与拦截：`navigation.onnavigate = (e) => { if (shouldIntercept(e)) e.intercept({ handler }) }` - 更新视图：在 `handler` 内获取目标 URL，拉取片段并替换 DOM，结合过渡 API ## 建议 - 保持可访问性：尊重默认导航；失败时回退到常规导航