` 元素。 ### 用单个 `navigate` 监听器渲染路由一个监听器就能看到链接点击、表单提交、`navigation.navigate()` 调用以及前进后退遍历。路由不该接管的情况提前返回：跨源目标、仅片段变化、下载。`handler()` 运行时 URL 已经改变，所以先渲染占位，再把取回的内容换进去。 ```js navigation.addEventListener("navigate", (event) => { if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) { return; } const url = new URL(event.destination.url); event.intercept({ async handler() { const view = document.querySelector("#view"); view.setAttribute("aria-busy", "true"); const response = await fetch(`/fragments${url.pathname}`, { signal: event.signal }); view.innerHTML = await response.text(); view.removeAttribute("aria-busy"); }, }); }); ``` 把 `event.signal` 传给 `fetch()`，用户在请求完成前再次导航时请求会被取消；否则迟到的响应会覆盖更新的路由。 ### `intercept()` 缺失时回退到 History API 只检测 `window.navigation` 不足以判断实现可用：Chrome 102 到 104 暴露了 `navigation` 却没有 `intercept()`，为 `intercept()` 写的监听器在那里第一次点击就会抛 `TypeError`。检查原型上的方法，否则接上经典的 `click` 加 `popstate` 组合。 ```js const hasNavigationApi = "navigation" in window && typeof NavigateEvent !== "undefined" && typeof NavigateEvent.prototype.intercept === "function"; async function render(pathname) { const response = await fetch(`/fragments${pathname}`); document.querySelector("#view").innerHTML = await response.text(); } if (hasNavigationApi) { navigation.addEventListener("navigate", (event) => { if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) return; const { pathname } = new URL(event.destination.url); event.intercept({ handler: () => render(pathname) }); }); } else { document.addEventListener("click", (event) => { const link = event.target.closest("a[href]"); if (!link || link.origin !== location.origin || event.button !== 0 || event.metaKey || event.ctrlKey) return; event.preventDefault(); history.pushState(null, "", link.href); render(link.pathname); }); window.addEventListener("popstate", () => render(location.pathname)); } ``` 回退方案拿不到 Navigation API 白送的那部分：表单提交、`location.assign()` 调用，以及落到另一个文档上的遍历都绕过 `click` 监听器，直接整页重载。 ### 用 `traverseTo()` 和存储的 state 回到已知条目 `navigation.entries()` 返回每个同源条目，其 `key` 在重载后依然有效，向导式流程因此可以回到第一步而不必知道中间推入了几步。导航时把步骤存进 `state`，目标页就能恢复表单。 ```js const startKey = navigation.currentEntry.key; async function goToStep(step) { const { finished } = navigation.navigate(`/checkout/${step}`, { state: { step, startedAt: Date.now() }, }); await finished; } function restart() { if (!navigation.entries().some((entry) => entry.key === startKey)) { navigation.navigate("/checkout/1", { history: "replace" }); return; } navigation.traverseTo(startKey); } navigation.addEventListener("currententrychange", () => { const state = navigation.currentEntry.getState(); if (state?.step) document.querySelector("#step").textContent = String(state.step); }); ``` 用户若中途去过别的源再回来，`startKey` 已不在 `entries()` 里，`traverseTo()` 会以 `InvalidStateError` 拒绝；`some()` 检查让 `restart()` 走替换分支。 ## 另请参阅 - [View Transitions](/zh/reference/performance/view-transitions/)，多数 Navigation API 路由与 `intercept()` 搭配的动画层 - [Back/forward cache（bfcache）](/zh/reference/performance/bfcache/)，决定跨文档遍历是否恢复旧文档 - [Speculation Rules API](/zh/reference/performance/speculation-rules/)，预取 `navigate` 处理函数即将请求的路由 - [HTML Standard: the navigation API](https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-api)（html.spec.whatwg.org） - [HTML Standard: navigate() method](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-navigation-navigate)（html.spec.whatwg.org） - [Modern client-side routing: the Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/)（developer.chrome.com） - [WICG navigation-api explainer](https://github.com/WICG/navigation-api)（github.com） - [Chromium bug 439994590: `javascript:` URLs accepted by navigate()](https://crbug.com/439994590)（crbug.com）