---

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

建议

• 保持可访问性：尊重默认导航；失败时回退到常规导航