前端路由是指在單頁(yè)應(yīng)用程序（SPA）中通過(guò)改變 URL 路徑來(lái)實(shí)現(xiàn)頁(yè)面切換和導(dǎo)航的機(jī)制。在前端開(kāi)發(fā)中，有兩種主要的前端路由實(shí)現(xiàn)方式：基于 History API 的路由（history-based routing）和基于哈希（Hash）的路由（hash-based routing）。

1. 基于 History API 的路由（history-based routing）：

   • History API 是 HTML5 提供的一組用于操作瀏覽器歷史記錄的接口。它允許 JavaScript 動(dòng)態(tài)地改變 URL，并添加、修改或刪除歷史記錄條目，而無(wú)需刷新整個(gè)頁(yè)面。
   • 實(shí)現(xiàn)原理：當(dāng)使用基于 History API 的路由時(shí)，URL 的路徑部分會(huì)隨著用戶的操作而動(dòng)態(tài)改變。通過(guò) History API 提供的方法（如 pushState、replaceState）可以添加或修改歷史記錄條目，并觸發(fā)相應(yīng)的頁(yè)面跳轉(zhuǎn)。瀏覽器會(huì)根據(jù)這些歷史記錄條目，加載相應(yīng)的頁(yè)面內(nèi)容，并保持頁(yè)面狀態(tài)的一致性。
   • 示例：假設(shè)使用基于 History API 的路由，當(dāng)用戶點(diǎn)擊導(dǎo)航鏈接時(shí)，JavaScript 可以使用 pushState 方法將新的路徑添加到瀏覽器的歷史記錄中。然后，瀏覽器會(huì)加載對(duì)應(yīng)的頁(yè)面內(nèi)容，而不會(huì)刷新整個(gè)頁(yè)面。這樣用戶就可以通過(guò)瀏覽器的前進(jìn)和后退按鈕來(lái)導(dǎo)航頁(yè)面，同時(shí) URL 也會(huì)相應(yīng)地改變。

2. 基于哈希的路由（hash-based routing）：

   • 哈希路由是在 URL 中使用哈希符號(hào)（#）來(lái)模擬路由的一種方式。在哈希路由中，URL 的路徑部分位于 # 符號(hào)之前，而 # 符號(hào)后面的部分被稱為哈希片段（hash fragment）。
   • 實(shí)現(xiàn)原理：當(dāng)使用基于哈希的路由時(shí)，URL 中的哈希片段會(huì)隨著用戶的操作而改變，但不會(huì)觸發(fā)整個(gè)頁(yè)面的刷新。JavaScript 可以通過(guò)監(jiān)聽(tīng)瀏覽器的 hashchange 事件來(lái)檢測(cè) URL 的變化，并根據(jù)哈希片段的不同值加載相應(yīng)的頁(yè)面內(nèi)容。
   • 示例：假設(shè)使用基于哈希的路由，當(dāng)用戶點(diǎn)擊導(dǎo)航鏈接時(shí)，JavaScript 可以通過(guò)修改 window.location.hash 屬性來(lái)改變 URL 的哈希片段。然后，JavaScript 監(jiān)聽(tīng) hashchange 事件，根據(jù)新的哈希片段值加載相應(yīng)的頁(yè)面內(nèi)容。

需要注意的是，基于 History API 的路由在現(xiàn)代瀏覽器中更為常見(jiàn)和推薦，因?yàn)樗峁┝烁觾?yōu)雅和語(yǔ)義化的 URL 結(jié)構(gòu)，而且不會(huì)造成頁(yè)面跳轉(zhuǎn)時(shí)出現(xiàn)閃爍的問(wèn)題。而基于哈希的路由主要用于兼容老版本瀏覽器或在一些特殊場(chǎng)景下使用。