大家好，我是大澈！一個喜歡結交朋友、喜歡編程技術和科技前沿的老程序員👨🏻?💻，關注我，科技未來或許我能幫到你！

Vue 路由相信朋友們用的都很熟了，但是你知道 Vue 路由是如何實現的嗎？

其實，前端路由是通過監聽URL的變化，然后根據不同的URL路徑顯示不同的頁面內容。

而 Vue 路由的實現，大體可歸結為這 4 個過程：

下面我拆成 5 部分來一一講解！

一、檢測 URL 變化

說起檢測 URL 變化，主要是還是聊聊 Vue 的兩種路由模式。

1、Hash 模式

Hash 模式是指在 URL 中添加 # 符號，例如：xxx/#/path。

核心機制：通過 window.location.hash 修改 URL 的哈希部分（即 # 后的內容），并配合使用 hashchange 事件實現檢測 URL 變化。

兼容性：支持所有瀏覽器（包括 IE9 及以下）。

2、History 模式

History 模式是指在 URL 中無 # 符號，路徑更簡潔，例如：xxx/path。

核心機制：通過 HTML5 的 history.pushState() ?或 ?history.replaceState() 方法修改路徑，并配合使用 popstate 事件實現檢測 URL 變化。

兼容性：依賴 HTML5 History API，支持 IE10+ 及現代瀏覽器，且需配置服務器將所有請求重定向到首頁，避免 404 錯誤。

二、匹配路由

提取當前 URL 的路徑（如 /user/123），遍歷路由表（routes 數組），找到與當前路徑匹配的路由規則。

一旦匹配到路由后，會將路由對應的組件、元信息（meta）、動態參數（params）以及查詢參數（query）等數據整合在一起，生成一個路由對象（如 { path: '/xxx', component: xxx, ... }）。

三、執行守衛

在路由切換前，依次執行各類導航守衛做權限/數據等檢查。

如果守衛中調用了?next(false)，或者拋出了錯誤，就會中斷導航。如果守衛異步邏輯執行成功，并調用?next()，則繼續執行下一個守衛，直到所有守衛執行完畢。

四、更新狀態

通常，路由對象會存放在一個響應式數據源（如?currentRoute）中。

當我們給?currentRoute?賦值一個新的路由信息時，就會觸發依賴它的組件（如?<router-view>）更新。

五、渲染組件

最后走 Vue 數據響應式更新那一套，完成頁面重新渲染。

關于 Vue 數據響應式原理，不懂的朋友可以看我之前的內容哈！

好了，今天要分享的內容就是這么多，聯系和更多內容在綠色App搜【程序員大澈】，最后感謝朋友們給個點贊、分享、推薦，拜拜~