Navigation API 演示 - 现代前端路由导航

Navigation API 是浏览器提供的新一代导航接口，旨在统一和简化前端路由管理。它解决了传统 History API 的以下痛点：

• 统一导航入口：无论是点击链接、调用 history.pushState()、浏览器前进/后退按钮，还是表单提交，都会触发同一个 navigate 事件。
• 原生拦截能力：通过 event.intercept() 方法，开发者可以在不阻止默认行为的情况下接管导航，实现 SPA 路由。
• 导航取消与超时：内置 AbortSignal 支持，导航可以被取消或设置超时。
• 更好的滚动恢复：提供 scroll() 和 restoreScroll() 方法，原生处理滚动位置。

intercept() 是 Navigation API 的核心方法。调用它后，浏览器不会执行完整的页面导航，而是由开发者接管：

navigation.addEventListener('navigate', (event) => {
  if (event.canIntercept && event.sameDocument) {
    event.intercept({
      handler: async () => {
        // 在此更新 DOM，模拟页面切换
        const url = new URL(event.destination.url);
        updatePageContent(url.pathname);
      }
    });
  }
});

注意：intercept() 只能用于同文档导航（sameDocument），跨文档导航无法拦截。

截至 2024 年：

• Chrome 102+：✅ 完全支持
• Edge 102+：✅ 完全支持
• Firefox：🔬 实验性支持（需开启 flag）
• Safari：❌ 尚未支持

对于不支持的浏览器，建议使用 History API 作为 fallback，本演示工具即实现了双重适配。

Navigation API 提供了两种方式：

1. navigation.navigate(url, { state: {...} }) — 设置目标条目的状态，通过 navigation.currentEntry.getState() 获取。
2. navigation.navigate(url, { info: {...} }) — 传递一次性导航信息，在 navigate 事件的 event.info 中获取，不会持久化到历史条目。

本演示中的「带Info导航」按钮即演示了 info 参数的用法。

• 表单未保存提醒：用户在编辑表单时尝试离开，弹出确认对话框。
• 权限验证：访问需要登录的页面时，重定向到登录页。
• 数据预加载：在导航到新页面前，先加载必要的数据。
• 页面切换动画：在 intercept() 的 handler 中实现过渡动画。
• 分析追踪：在每次导航时发送页面浏览事件。

本演示中的「路由守卫」开关模拟了仪表盘页面的权限拦截。

同文档导航是指不触发完整页面加载的导航方式，包括：

• URL 的 hash 部分变化（#/path）
• 调用 history.pushState() 或 history.replaceState()
• 调用 navigation.navigate() 且目标 URL 与当前同源

Navigation API 中，event.sameDocument 为 true 时表示同文档导航，此时可以使用 intercept() 拦截。

传统 History API 的滚动恢复依赖浏览器自动处理或手动实现，体验不一致。Navigation API 提供了：

• event.restoreScroll() — 恢复浏览器记录的滚动位置
• event.scroll({ behavior: 'smooth', top: 0 }) — 手动控制滚动
• 在 intercept() 的 handler 完成后，浏览器可自动处理滚动

这使得 SPA 应用的滚动体验接近原生多页应用。