你真的瞭解前端路由嗎？

前言：網絡上，不少介紹前端路由實現的文章，以及路由原理的文章。可是最近在面試過程當中，我發現，全部面試者都能講清楚路由的技術實現，可是卻對每一種技術實現的適用場景不理解。好比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