前端路由的原理

一、什麼是路由？

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

二、什麼是前端路由？

前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做（傳統的專案是服務端根據 url 的不同，返回不同的頁面實現的）；

三、什麼是後端路由？

通過使用者請求的url導航到具體的html頁面；每跳轉到不同的url，都重新訪問服務端，然後服務端返回頁面，頁面也可以是服務端獲取資料，然後和模板組合，返回html，也可以是直接返回模板html，然後由前端js再去請求資料，使用前端模板和資料進行組合，生成想要的html。

四、前後端路由優缺點對比

優點：

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

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

缺點：

使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取。

五、前端路由的兩種實現原理

1.history api

利用h5兩個新增的api history.pushstate 和 history.replacestate；

缺點:不支援ie9及以下,無法做ie9的適配，所以基礎智慧型平台未使用這種實現模式,推薦使用hash。

2.hash

根據監聽雜湊變化觸發的事件 —— hashchange 事件；

六、前端路由的使用場景

前端路由更多用在單頁應用上, 也就是spa, 因為單頁面應用基本上都是前後端分離的, 後端自然也就不會給前端提供路由。