NavigateEvent：intercept() 方法

intercept()
intercept(options)

navigation.addEventListener("navigate", (event) => {
  // 如果此导航不应被拦截，则提前退出，例如，如果导航是跨源的，或者是下载请求
  if (shouldNotIntercept(event)) return;

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // URL 已更改，因此在获取新内容时显示占位符，例如旋转图标或加载页面
        renderArticlePagePlaceholder();

        // 获取新内容并在准备就绪时显示
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

navigation.addEventListener("navigate", (event) => {
  if (event.formData && event.canIntercept) {
    // 用户向同域的 URL 提交了一个 POST 表单（如果 canIntercept 为 false，则该事件仅提供信息：你无法拦截此请求，尽管你仍然可以调用 .preventDefault() 来完全停止它）。

    event.intercept({
      // 由于我们不会在此导航中更新 DOM，因此不允许焦点或滚动重置：
      focusReset: "manual",
      scroll: "manual",
      async handler() {
        await fetch(event.destination.url, {
          method: "POST",
          body: event.formData,
        });
        // 你可以再次使用 {history: 'replace'} 导航来更改此处的 URL，这可能表示“完成”
      },
    });
  }
});