在早期 Web 前端還沒那麼強大的時候，一直都是由後端主導路由，例如 JSP、PHP 等等，在不同的網址對伺服器發出請求，取得 HTML 後渲染到網頁上同時刷新頁面。這種做法直到 SPA 的出現才逐漸改變。

SPA 是什麼？

SPA 全名為 Single Page Application（單頁應用程式），這種做法使用 Ajax 不斷渲染網頁，網站也不必每頁都向伺服器發出請求，使得使用者體驗更好、不過相對的對 SEO 效果較差。

有了 SPA 後，前端路由也隨之誕生。

前端路由

在網頁上我們習慣使用上下頁來切換網頁，不過在 SPA 的網頁上一切都是使用 JavaScript 來渲染，哪來的上下頁？好家在我們可以使用 Hash 和 HTML5 新規範所提供的 History API 來達成。如果有玩過 vue-router 的話應該會發現有這兩種模式可以選。

以下簡單講兩者的特點：

Hash 模式

hash 是存在 URL 上的一種狀態，也就是 URL 中從 # 開始的字串，例如下面的網址：

https://example.com#123

hash 的特性是不會重新整理網頁，也可透過 hashchange 事件、或瀏覽器的上下頁來取得 hash。

window.addEventListener('hashchange', (e) => {
    console.log(window.location.hash)
})

在有 HTML5 規範後的 History 模式以前，大部分都是使用 Hash 模式。

另外使用 Hash 模式的缺點是網址醜、會導致錨點失效。

History 模式

History 模式就是我們平常看到沒有帶 # 的網址，前端框架中的路由大部分都是透過 history 這個 API 來完成。

較為重要的 API 是這三個：

• history.pushState： 添加新的狀態。
• history.replaceState： 取代當前狀態。
• popstate：執行上下頁時觸發。

pushState

pushState 能讓我們新增新的狀態（歷史紀錄）、同時不重整頁面，pushState 可以帶三個參數：

• state：合法的 Javascript 对象，可以用在 popstate 事件中。
• title：瀏覽器忽略參數、可以傳 null 替代。
• url：歷史紀錄的 URL。

history.pushState({ name: "qq" }, null, "qq.html");

replaceState

方法與 pushState 相同，差別在於 會取代最新的一筆狀態。

popstate

123 會在執行上下頁時觸發，下面的 log 會印出上面兩種方法的 state，也就是 { name: "qq" } 這段。

window.addEventListener("popstate", function (e) {
  console.log(e.state);
});

參考資料

• 一文让你弄懂前端路由到底是怎么实现的~
• 那些被忽略但很好用的 Web API / History
• 「前端进阶」彻底弄懂前端路由