網頁導航大升級：Navigation API 正式支援所有主流瀏覽器

為什麼這件事跟你有關？

如果你的公司有開發單頁應用程式（Single Page Application，簡稱 SPA，也就是不會整頁重新載入、操作起來像 App 的網站），你一定遇過這些問題：使用者按了瀏覽器的「上一頁」卻跑到錯誤畫面、表單送出後頁面整個重新整理、或是頁面切換時捲動位置亂掉。過去十幾年，開發者只能用 window.history 陽春地手動處理這些事，現在終於有更好的解法了。

過去的痛：History API 為什麼不夠用？

過去要讓 SPA 模擬一般多頁網站的導航行為（例如支援瀏覽器的前進、後退按鈕），開發者必須手動去操作瀏覽器的歷史紀錄。雖然後來有 History API 稍微改善，但它有很多限制：

• 無法偵測所有類型的導航觸發方式（例如表單送出）。
• 無法讀取完整的歷史紀錄堆疊，也無法編輯非目前的紀錄。
• popstate 事件行為不一致，用程式碼呼叫 pushState 或 replaceState 時不會觸發。

結果就是開發者必須自己拼湊一堆邏輯：攔截連結點擊、手動更新網址、手動更新畫面、另外監聽 popstate 處理前進後退⋯⋯只要漏掉一個邊角案例，使用者就可能看到錯誤畫面。

新的解法：Navigation API 一次搞定

Navigation API 在 2026 年初正式成為 Baseline Newly Available，意思是 Chrome、Safari、Firefox 等主流瀏覽器都已經支援，可以放心在正式環境使用。它帶來幾個關鍵改善：

單一事件監聽，涵蓋所有導航行為

不管是使用者點擊連結、送出表單、按瀏覽器的前進後退，還是程式碼主動呼叫導航，全部都會觸發同一個 navigate 事件。開發者只需要在這一個地方處理邏輯，不用再到處拼湊。

自動處理網址與歷史紀錄

透過 event.intercept()，API 會自動幫你更新網址列和歷史紀錄，不需要再手動呼叫 pushState。

自動處理無障礙與捲動

頁面切換後，焦點該回到哪裡？捲動位置該怎麼恢復？Navigation API 內建處理這些事。如果內容需要非同步載入（例如等 API 回傳資料），還可以設定 scroll: 'manual'，等畫面渲染完成後再手動呼叫 event.scroll() 恢復正確位置。

表單送出也能攔截

過去表單送出一定會導致頁面重新整理，現在 navigate 事件會自動捕捉同文件的表單送出，並透過 event.formData 取得表單資料，讓你可以用非同步方式處理，畫面完全不用重新載入。

搭配 View Transitions API 打造流暢動畫

Navigation API 可以和 View Transitions API（瀏覽器內建的頁面切換動畫 API）搭配使用。在攔截導航事件時，把 DOM 更新包在 document.startViewTransition() 裡面，瀏覽器就會自動幫你做「舊畫面 → 新畫面」的過渡動畫，讓 SPA 操作起來更像原生 App。

崴米的建議

• 評估現有 SPA 專案是否升級：如果你的網站是用 React、Vue 等框架開發的 SPA，可以開始評估將路由邏輯遷移到 Navigation API，減少自製路由的維護成本與邊角案例問題。
• 善用瀏覽器內建能力，減少第三方套件：Navigation API 是瀏覽器原生支援的功能，效能更好、也更穩定。對於新專案，可以考慮直接採用，減少對第三方路由套件的依賴。
• 重視使用者體驗的細節：捲動位置恢復、焦點管理、頁面切換動畫，這些看似微小的細節，其實大大影響使用者對網站的「質感」印象。崴米在網站設計與開發上，會針對這些細節做最佳化，讓你的網站不只好看，更好用。

參考來源：Navigation API - a better way to navigate, is now Baseline Newly Available