前端的路由和後端的路由在實現技術上不一樣，但是原理都是一樣的。在 HTML5 的 history API 出現之前，前端的路由都是通過 hash 來實現的，hash 能相容低版本的瀏覽器。

http://10.0.0.1/
http://10.0.0.1/#/about
http://10.0.0.1/#/concat

服務端路由：每跳轉到不同的URL，都是重新訪問服務端，然後服務端返回頁面，頁面也可以是服務端獲取資料，然後和模板組合，返回HTML，也可以是直接返回模板HTML，然後由前端JS再去請求資料，使用前端模板和資料進行組合，生成想要的HTML。

前端路由：每跳轉到不同的URL都是使用前端的錨點路由，實際上只是JS根據URL來操作DOM元素，根據每個頁面需要的去服務端請求資料，返回資料後和模板進行組合，當然模板有可能是請求服務端返回的，這就是 SPA 單頁程式。

在js可以通過window.location.hash讀取到路徑加以解析之後就可以響應不同路徑的邏輯處理。

history 是 HTML5 才有的新 API，可以用來操作瀏覽器的 session history (會話歷史)。基於 history 來實現的路由可以和最初的例子中提到的路徑規則一樣。

H5還新增了一個hashchange事件，也是很有用途的一個新事件：

當頁面hash(#)變化時，即會觸發hashchange。錨點Hash起到引導瀏覽器將這次記錄推入歷史記錄棧頂的作用，window.location物件處理“#”的改變並不會重新載入頁面，而是將之當成新頁面，放入歷史棧裡。並且，當前進或者後退或者觸發hashchange事件時，我們可以在對應的事件處理函式中註冊ajax等操作！
但是hashchange這個事件不是每個瀏覽器都有，低階瀏覽器需要用輪詢檢測URL是否在變化，來檢測錨點的變化。當錨點內容(location.hash)被操作時，如果錨點內容發生改變瀏覽器才會將其放入歷史棧中，如果錨點內容沒發生變化，歷史棧並不會增加，並且也不會觸發hashchange事件。

瞭解更多web前端培訓就業相關面試題歡迎關注小編！