什麽是路由？

路由是根據不同的 url 地址展示不同的內容或頁面

早期的路由都是後端直接根據 url 來 reload 頁面實現的，即後端控制路由。

後來頁面越來越復雜，服務器壓力越來越大，隨著 ajax（異步刷新技術） 的出現，頁面實現非 reload 就能刷新數據，讓前端也可以控制 url 自行管理，前端路由由此而生。

單頁面應用的實現，就是因為前端路由。

前端路由實現

1.Pjax（PushState + Ajax）

原理：利用ajax請求替代了a標簽的默認跳轉，然後利用html5中的API修改了url。

API： history.pushState 和 history.replaceState

兩個 API 都會操作瀏覽器的歷史記錄，而不會引起頁面的刷新，pushState會增加一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。（Ajax可以實現頁面的無刷新操作，於是，返回的時候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣）

瀏覽器的前進與後退，會觸發window.onpopstate事件，通過綁定popstate事件，就可以根據當前URL地址中的查詢內容讓對應的菜單執行Ajax載入，實現Ajax的前進與後退效果。

頁面首次載入的時候，如果沒有查詢地址、或查詢地址不匹配，則使用第一個菜單的Ajax地址的查詢內容，並使用history.replaceState

window.history.pushState(null, null, "name/blue");
//url: https://www.baidu.com/name/blue

window.history.pushState(null, null, "/name/orange");
//url: https://www.baidu.com/name/orange

2.Hjax（Hash + Ajax）

原理：url 中常會出現 #，一可以表示錨點（如回到頂部按鈕的原理），二是路由裏的錨點（hash）。Web 服務並不會解析 hash，也就是說 # 後的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之後就可以響應不同路徑的邏輯處理。

hashchange 事件(監聽 hash 變化觸發的事件)，當用 window.location 處理哈希的改變時不會重新渲染頁面，而是當作新頁面加到歷史記錄中，這樣我們跳轉頁面就可以在 hashchange 事件中註冊 ajax 從而改變頁面內容。

前端路由的兩種實現方式