[TOC] # 摘要 無論是 vue-router 還是 react-router，其核心都是用 hash / H5 history 實現的，這里我們拋開框架來自己實現下簡單的前端路由功能。 # hash 路由 hash 路由一個明顯的標志是帶有`#`,我們主要是通過監聽 url 中的 hash 變化來進行路由跳轉。 有以下幾個要點： - 以鍵值對的形式存儲 path 及其回調函數 - 監聽 hashchange 事件觸發對應的回調 - 用一個 history 數組來記錄之前的 hash 路由，并創建一個指針來實現前進后退的功能 ```js class Routers { constructor () { // 以鍵值對的形式存儲路由 this.routes = {} // 當前路由的 url this.currentUrl = '' // 記錄出現過的 hash this.history = [] // 作為指針，默認指向 this.history 的末尾，根據后退前進指向 history 中不同的 hash this.currentIndex = this.history.length - 1 this.isBack = false // 記錄是否為后退操作 // 監聽對應事件 this.refresh = this.refresh.bind(this) this.backOff = this.backOff.bind(this) window.addEventListener('load', this.refresh, false) window.addEventListener('hashchange', this.refresh, false) } // 將 path 路徑與對應的 callback 函數儲存 route (path, callback) { this.routes[path] = callback || function () {} } // 刷新 refresh () { this.currentUrl = location.hash.slice(1) || '/' // 獲取當前 URL 中的 hash 路徑 if (!this.isBack) { this.history.push(this.currentUrl) // 將當前 hash 路由推入 history 數組中 } this.currentIndex++ // 指針向前移動 this.routes[this.currentUrl]() // 執行當前 hash 路徑的 callback 函數 this.isBack = false } // 后退功能 backOff () { this.isBack = true // 如果指針小于 0 的話就不存在對應 hash 路由了，因此鎖定指針為 0 即可 this.currentIndex <= 0 ? this.currentIndex = 0 : this.currentIndex = this.currentIndex - 1 location.hash = `#${this.history[this.currentIndex]}` // location 響應變化 this.routes[this.history[this.backOff.currentIndex]]() // 執行對應的 callback } } ``` # History 路由 首先 History 有以下 API，具體見 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/History) | 屬性 | 描述 | | --- | --- | | state -> window.history.state | 返回一個表示歷史堆棧頂部的狀態的值 | | length -> window.history.length | 返回一個整數，表示會話歷史中的元素數目 | 方法 | 描述 | | --- | --- | | back() | 返回上一頁 | | forward() | 在瀏覽器歷史記錄中前往下一頁 | | go() | 參數為 -1 時前往上一頁，參數為 1 時前往下一頁 | | pushState(stateObject, title, URL) | 按指定的名稱和 URL（如果提供該參數）將數據 push 進會話歷史棧，數據被 DOM 進行不透明處理；你可以指定任何可以被序列化的 javaScript 對象 | | replaceState(stateObject, title, URL) | 按指定的數據、名稱和 URL（如果提供該參數）更新歷史棧上最新的入口。這個數據被 DOM 進行了不透明處理。你可以指定任何可以被序列化的 JavaScript 對象 | | 事件 | 描述 | | --- | --- | | popState | 瀏覽器跳轉到新的狀態時會觸發 popState 事件，該事件將攜帶這個 stateObject 參數的副本 | ```js class Routers { constructor () { this.routes = {} this._bindPopState() } // 初始化路由 init (path) { history.replaceState({ path: path }, null, path) this.routes[path] && this.routes[path]() } // 將路徑和對應的回調函數加入 hashMap route (path, callback) { this.routes[path] = callback || function () {} } go (path) { history.pushState({ path: path }, null, path) this.routes[path] && this.routes[path]() } // 監聽 popstate 事件 _bindPopState () { window.addEventListener('popstate', e => { const path = e.state && e.state.path this.routes[path] && this.routes[path]() }) } } ``` # 參考資料 [https://www.cxymsg.com/guide/router.html#%E5%89%8D%E8%A8%80](https://www.cxymsg.com/guide/router.html#%E5%89%8D%E8%A8%80)