前端路由原理

簡單來說，假如我們有一台提供 web 服務的伺服器的網路位址是：10.0.0.1，而該 web 服務又提供了三個可供使用者訪問的頁面，其頁面 uri 分別是：

about

concat

那麼其路徑就分別是 /，/about，/concat。

當使用者使用 about 來訪問該頁面時，web 服務會接收到這個請求，然後會解析 url 中的路徑 /about，在 web 服務的程式中，該路徑對應著相應的處理邏輯，程式會把請求交給路徑所對應的處理邏輯，這樣就完成了一次路由分發，這個分發就是通過「路由」來完成的。

以前路由都是後台做的，通過使用者請求的url導航到具體的html頁面，前端路由就是通過配置js檔案，把這個工作拿到前端來做。

簡單的說，路由是根據不同的 url 位址展示不同的內容或頁面，通俗來說，路由就是指隨著瀏覽器位址列的變化，展示給使用者的頁面也不相同。

1.從效能和使用者體驗的層面來比較的話，後端路由每次訪問乙個新頁面的時候都要向伺服器傳送請求，然後伺服器再響應請求，這個過程肯定會有延遲。而前端路由在訪問乙個新頁面的時候僅僅是變換了一下路徑而已，沒有了網路延遲，對於使用者體驗來說會有相當大的提公升。

2.在某些場合中，用ajax請求，可以讓頁面區域性重新整理，頁面變了但url沒有變化，使用者就不能複製到想要的位址，用前端路由做單頁面網頁就很好的解決了這個問題

基於hash

早期的前端路由的實現就是基於location.hash來實現的。其實現原理也很簡單，location.hash的值就是url中**#**後面的內容。比如下面這個**，它的location.hash=』#me』：

基於history api

前面的hash雖然也很不錯，但使用時都需要加上#，並不是很美觀。因此到了html5，又提供了history api來實現url的變化。其中做最主要的api有以下兩個：history.pushstate()和history.repalcestate()。

這兩個api可以在不進行重新整理的情況下，操作瀏覽器的歷史記錄。唯一不同的是，前者是新增乙個歷史記錄，後者是直接替換當前的歷史記錄。