前端路由實現原理

路由（router）這個概念最先是後端出現的，是用來跟後端伺服器進行互動的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。

前端隨著 ajax 的流行，資料請求可以在不重新整理瀏覽器的情況下進行。非同步互動體驗中最盛行的就是 spa —— 單頁應用。單頁應用不僅僅是在頁面互動時無重新整理的，連頁面跳轉都是無重新整理的，為了實現單頁應用，所以就有了前端路由。

乙個基本的前端路由至少應該提供以下功能：

前端router可以控制瀏覽器的 history，使的瀏覽器不會在 url 發生改變時重新整理整個頁面。

前端router需要維護乙個 url 歷史棧，通過這個棧可以返回之前頁面，進入下乙個頁面。

前端路由實現原理就是匹配不同的 url 路徑，進行解析，然後動態的渲染出區域 html 內容。但是這樣存在乙個問題，就是 url 每次變化的時候，都會造成頁面的重新整理。那解決問題的思路便是在改變 url 的情況下，保證頁面的不重新整理。目前 router有兩種實現方式 history 和 hash。

url hash 的形式類似如下：

// 表示文章列表頁面

// 表示文章詳情頁面

# 後面的內容即我們說的 hash 值。hash 用於表示頁面的乙個位置，當瀏覽器載入完頁面後，會滾動到 hash 所指向的位置，這是 url hash 最初的目的。

hash 只作用在瀏覽器，不會在請求中傳送給伺服器。

hash 發生變化時，瀏覽器並不會重新給後端傳送請求載入頁面。

修改 hash 時會在瀏覽器留下歷史記錄，可以通過瀏覽器返回按鈕回到上乙個頁面。

hash 發生變化時會觸發 hashchange 事件，在該事件中可以通過 window.location.hash 獲取到當前 hash值。

// router.js
function router() )
}  /* 監聽 url 變化  */
this.listen = function () 
}}, false)
}  /* 前進到乙個新的url  */
this.push = function (path) 
/* 替換成乙個新的url  */
this.replace = function (path) 
/* 返回到上乙個url  */
this.back = function () 
}

// router.html

點選跳轉到 list

history 在h5出現之前，可以使用 history.back() 向後跳轉，使用 history.forward() 控制向前跳轉。

在 h5 中新增了 history.pushstate() 和 history.replacestate()，分別可以新增和修改歷史記錄。

window.history.pushstate({}, "title", "");
window.history.replacestate({}, "title", "");

和 hash 一樣，使用 pushstate 和 replacestate 修改 url 同樣有 hash 具備的特點。瀏覽器歷史記錄的變更會觸發 window 的 onpopstate 事件，可以根據這個事件來監聽 url的變化。

// router2.js
function router() )
}  /* 監聽 url 變化  */
this.listen = function () }})
}  /* 前進到乙個新的url  */
this.push = function (path) , '', path)
}  /* 替換成乙個新的url  */
this.replace = function (path) , '', path)
}  /* 返回到上乙個url  */
this.back = function () 
}

// router2.html

點選跳轉到 list

hash 使用 # 後面的內容模擬乙個完整路徑，不太美觀。

hash 在請求時不會傳送給伺服器，使用者手動重新整理頁面，後端接受到了也是同乙個位址。

history 直接修改瀏覽器 url，使用者手動重新整理頁面，後端接受到是不同的位址，需要後端做處理跳轉到統一的html頁面。

本文**自：/5e5e603810dcbf0b1852b3c0.html

前端路由實現原理

前端路由原理

前端路由原理

前端路由原理

前端路由實現原理

前端路由原理

前端路由原理

前端路由原理

相關推薦