言：網絡上，很多介紹前端路由實現的文章，以及路由原理的文章。但是最近在面試過程中，我發現，所有面試者都能講清楚路由的技術實現，但是卻對每一種技術實現的適用場景不理解。比如hash路由，很多人的回答是hash路由會帶有一個#號不好看，所以用了history路由。甚至我出去面試的時候，也有一些面試官這么認為(T_T)。任何技術方案的產生都是為了解決某些特定問題的。hash和history也不例外。

目前前端路由方案主要有以下幾種

• hash：可能是大多數人了解的模式，主要是基于錨點的原理實現。簡單易用

• browser：即使用html5標準中的history api通過監聽popstate事件來對dom進行操作。每次路由變化都會引起重定向

• memory：這種實現是在內存中維護一個堆棧用于管理訪問歷史的方式，比較復雜。在早起移動端使用比較多。實現麻煩，問題也較多。現在很少有使用。RN在使用這種路由模式

• static：主要用于ssr。需要后端去管理路由

前端路由解決的問題

• 根據路由變化顯示不同的頁面，完成頁面切換

• 通過query傳參

前端路由各種實現方案的對比

hash路由 優缺點

• 優點

• 實現簡單，兼容性好（兼容到ie8）

• 絕大多數前端框架均提供了給予hash的路由實現

• 不需要服務器端進行任何設置和開發

• 除了資源加載和ajax請求以外，不會發起其他請求

• 缺點

• 對于部分需要重定向的操作，后端無法獲取hash部分內容，導致后臺無法取得url中的數據，典型的例子就是微信公眾號的oauth驗證

• 服務器端無法準確跟蹤前端路由信息

• 對于需要錨點功能的需求會與目前路由機制沖突

browser路由 優缺點

• 優點

• 對于重定向過程中不會丟失url中的參數。后端可以拿到這部分數據

• 絕大多數前段框架均提供了browser的路由實現

• 后端可以準確跟蹤路由信息

• 可以使用history.state來獲取當前url對應的狀態信息

• 缺點

• 兼容性不如hash路由(只兼容到IE10)

• 需要后端支持，每次返回html文檔

memory路由 優缺點

• 優點

• 不存在兼容性問題，路由保存在內存中

• 不需要服務器端提供支持

• 缺點

• 目前很少有前端路由模塊提供對memory路由的實現(react-router提供了memory實現)

• 自己實現難度較大，且工作量也很大

• 對于前進后退操作的路由管理非常麻煩，尤其是android設備的backbutton

static路由 優缺點（該路由方式主要用于ssr。不做比較。）

如何選擇合適的前端路由方案？以下建議作為參考：

hash模式適用場景：

• 兼容IE8

• 沒有重定向傳參需求(第三方認證oauth)

• 沒有錨點跳躍需求

• 后端不需要跟蹤前端路由信息

• hybrid app需要將前端資源打包在應用內，因為html的域在file://下，所以不能發生重定向

history模式適用場景：

• 頁面內錨點需求

• 需要重定向傳參

• 同構直出

• 后端跟蹤路由信息

• 附加路由信息(history.state)獲取路由狀態

memory模式適用場景：

• ie8以下兼容

• React Native