摘要：最新一直在看關于和路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由的。在瀏覽器中實現前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。

最新一直在看關于 Vue 和 React 路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽器原生的路由 API 整體梳理一遍，以便更加順暢的理解 Vue-Router 和 React-Router 的相關實現和原理。

瀏覽器的主要功能就是根據輸入的 URL 在窗口加載對應的文檔，與此同時，瀏覽器會記錄一個 tab 窗口載入過的所有文檔，同時會提供 "前進"、"后退" 和 "刷新" 的功能，以便用戶可以在這些已經記錄的文檔之間進行切換瀏覽和重載當前頁面獲取最新的瀏覽信息。

這些功能的實現最早是在服務器端實現的，因為那時候的引用都是前后端不分離的，頁面內容也是動態生成的，所以這些頁面的跳轉、切換、刷新都是在服務端實現的。后來出現了 SPA（Single Page Application 單頁應用），頁面都是通過 JavaScript 動態生成和載入到頁面的，并且可以在無刷新的情況下加載頁面最新的狀態信息，這時候如果要提供上述的功能就需要自己進行處理（因為此時的頁面都是現實在同一個大的框架頁面里面的，根本不存在頁面的跳轉切換），所以催生了各種框架對應的 Router 實現。

在瀏覽器中實現前端路由主要有兩種方式：一個是我們常用的 hash，另一個是 HTML5 提供的 history。其實還有另外一種利用 stack 實現的方式適用于 Node.js 服務器端，這里我們著重說一下瀏覽器提供的 hash 和 history 吧，stack 具體怎么實現等我們說到 x-Router 源碼的時候再詳細說一下。

在瀏覽器 URL 地址欄，我們總會發現像這樣的地址：react.docschina.org/docs/react-… React 官網關于 lazy 的一個地址）。大家肯定發現：這串 URL 的最后有以 # 號開始的一串標識，那它到底是起著什么樣的作用呢？肯定不會平白無故的出現吧。

hash 特性

你可以直接在瀏覽器中打開這個鏈接地址，你是不是發現頁面會自動滾動到（頁面頂部定位到）標題為 React.lazy 的部分文檔。你再將頁面往上滾動，肯定會發現上面還有部分的文檔內容。此時，你修改地址欄的地址為?react.docschina.org/docs/react-… React.Suspense 部分。

在早些年，hash 作為 URL 的一部分主要用來定位文檔中的文檔片段。在上面的例子中，我們通過在 URL 后面添加 #reactlazy 和 #reactsuspense 定位到了文檔對應標題為 React.lazy 和 React.Suspense 的部分。那他們到底是怎么做到的呢？
通過審核元素我們發現：在?React.lazy 和 React.Suspense 對應的標題部分分別都有一個 h3 標簽，而且標簽的 id 屬性對應就是我們在 URL 地址欄輸入的 hash 值部分（只是少了 # 號）。

hash 定位文檔片段
可能有同學會有疑惑：為什么 hash 是通過元素上面的 id 屬性來定位文檔的？前面我們提到過，URL 中的 hash 部分是用來定位文檔中的文檔片段的。大家想想：所需要定位的文檔片段肯定是唯一的，不然定位肯定是不準確了，那這個定位文檔就有點雞肋了，在文檔中標識唯一的屬性只有是 id 了，如果是我，我也會通過 hash 匹配元素的 id 來定位文檔?，F在來驗證一下我們的猜想：

1、首先在新的 tab 窗口打開?react.docschina.org/docs/react-… 頁面，然后在審核元素下找到上圖所展示的 DOM 元素，修改其中的 h3 標簽的 id 屬性值為 reactlazy1，接著在 URL 地址欄追加 #reactlazy hash 值并按下回車鍵，此時頁面并沒有定位到標題為 React.lazy 的文檔片段，最后將 URL 地址欄的 #reactlazy hash 值改成?#reactlazy1 hash 值并按下回車鍵，此時頁面并沒有定位到標題為 React.lazy 的文檔片段，這一系列的表現說明 hash 定位還是和元素的 id 屬性值還是有關聯的；

2、依然是在新的 tab 窗口打開?react.docschina.org/docs/react-… 頁面，然后將頁面手動滾動到標題為 React.lazy 的文檔片段，將鼠標放在標題上會出現一個錨點的圖標，點擊圖標發現頁面定位到了標題為 React.lazy 的文檔片段并且 URL 地址欄變成了?react.docschina.org/docs/react-…?#reactlazy hash 值。此時再回頭看看我們前面給出的截圖發現 id 屬性值為?reactlazy 的 h3 標簽中有一個 href 屬性值為 #reactlazy 的 a 標簽，其實我們在頁面上看到的錨點圖標就是這個 a 標簽的展示。當我們點擊錨點圖標就是點擊了 a 鏈接，然后將 url 定位到了?id 屬性值為?reactlazy 的 h3 標簽，還是很好的說明了 hash 定位還是和元素的 id 屬性值還是有關聯的；

3、MDN 官方定義如下：

MDN 官方文檔上有明確的定義，但是我們還是通過兩個方面來證明了我們的推論，乍一看好像說了很多沒有用的東西，其實這樣反復的推敲更有利于我們深刻的理解相關的知識點以及為什么是這樣，而不是那樣!

hash 路由

hash 的存在除了可以通過設置文檔中元素的 ID 來定位文檔片段之外，還可以設置為任意的字符串來表示路由。在 Vue、React 等現代前端框架中，為了實現功能完備的 SPA 應用都配備了對應的路由系統。在這些路由系統都會提供 hash 路由模式。

在 hash 模式下，hash 會支持任意的字符串來表示對應的 URL。這些路由系統針對 hash 模式的實現基本都是大同小異：在設置 location.hash 屬性值后，應用就會想盡一切辦法檢測狀態值變化，以便能夠讀取出存儲在片段標識符中的狀態并相應地更新自己的狀態。支持 HTML5 的瀏覽器一旦發現片段標識符發生了變化，就會在 Window 對象上觸發 hashchange 事件，這時就會觸發對象的函數處理邏輯 —— 對?location.hash 的值進行解析，然后使用該值包含的狀態信息重新渲染應用。

這里只是提到了一個基礎的思路，路由系統的具體實現，后續會娓娓道來！

hash 事件

// 在 window 下監聽 hashchange 事件
window.onhashchange = function() {
  // 當事件觸發時輸出當前的 hash 值
  console.log(window.location.hash)
}

在不支持 HTML5 的瀏覽器中，我們可以通過 100ms 輪詢監聽 url 變化來模擬：

(function(window){
  // 如果瀏覽器不支持原生實現的事件，則開始模擬，否則退出。
  if ( "onhashchange" in window.document.body ) return;
  
  var location = window.location,
      oldUrl = location.href,
      oldHash = location.hash;

  // 每隔 100ms 檢查 hash 是否發生變化
  setInterval(function() {
    var newUrl = location.href,
        newHash = location.hash;

    // hash 發生變化且全局注冊有 onhashchange 方法（這個名字是為了和模擬的事件名保持統一）；
    if (newHash !== oldHash && typeof window.onhashchange === "function"  ) {
      // 執行方法
      window.onhashchange({
        type: "hashchange",
        oldURL: oldUrl,
        newURL: newUrl
      });

      oldUrl = newUrl;
      oldHash = newHash;
    }
  }, 100);
})(window)

??注意：設置 location.hash 屬性會更新顯示在地址欄中的 URL，同時會在瀏覽器的歷史記錄中添加一條記錄。

為了標準化管理瀏覽器歷史管理，HTML5 定義了相對復雜的 API —— history。

history api

1、history 里面新增了兩個 API，history.pushState() 和 history.replaceState()。這兩個 API 都接受同樣的參數：

它們之間的不同之處是：history.pushState() 方法是將新狀態添加到瀏覽器的歷史記錄中，也就是說還可以通過點擊?"后退"?按鈕，退到前一個頁面；history.replaceState() 是用新的狀態代替當前的歷史狀態，也就是說沒有更多的歷史記錄，"后退"?按鈕不能操作了，頁面不能?"后退"?了。

??注意：當執行這兩個 API 時，瀏覽器的 URL 地址欄會變化，但是頁面內容不會刷新！

狀態對象（state