你真的瞭解前端路由嗎？

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