作者：@whinc鏈接：https://github.com/whinc/blog/issues/13

在單頁應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個框架都提供了強大的路由功能，導(dǎo)致路由實現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實現(xiàn)還是有些困難的，但是如果只想了解路由實現(xiàn)基本原理還是比較簡單的。本文針對前端路由主流的實現(xiàn)方式 hash 和 history，提供了原生JS/React/Vue 共計六個版本供參考，每個版本的實現(xiàn)代碼約 25~40 行左右(含空行)。

什么是前端路由？

路由的概念來源于服務(wù)端，在服務(wù)端中路由描述的是 URL 與處理函數(shù)之間的映射關(guān)系。

在 Web 前端單頁應(yīng)用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關(guān)系，這種映射是單向的，即 URL 變化引起 UI 更新(無需刷新頁面)。

如何實現(xiàn)前端路由？

要實現(xiàn)前端路由，需要解決兩個核心：

• 如何改變 URL 卻不引起頁面刷新？
• 如何檢測 URL 變化了？

下面分別使用 hash 和 history 兩種實現(xiàn)方式回答上面的兩個核心問題。

hash 實現(xiàn)

• hash 是 URL 中 hash (#) 及后面的那部分，常用作錨點在頁面內(nèi)進行導(dǎo)航，改變 URL 中的 hash 部分不會引起頁面刷新
• 通過 hashchange 事件監(jiān)聽 URL 的變化，改變 URL 的方式只有這幾種：通過瀏覽器前進后退改變 URL、通過標(biāo)簽改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會觸發(fā) hashchange 事件

history 實現(xiàn)

• history 提供了 pushState 和 replaceState 兩個方法，這兩個方法改變 URL 的 path 部分不會引起頁面刷新
• history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進后退改變 URL 時會觸發(fā) popstate 事件，通過pushState/replaceState或標(biāo)簽改變 URL 不會觸發(fā) popstate 事件。好在我們可以攔截 pushState/replaceState的調(diào)用和標(biāo)簽的點擊事件來檢測 URL 變化，所以監(jiān)聽 URL 變化可以實現(xiàn)，只是沒有 hashchange 那么方便。

原生JS版前端路由實現(xiàn)

基于上節(jié)討論的兩種實現(xiàn)方式，分別實現(xiàn) hash 版本和 history 版本的路由，示例使用原生 HTML/JS 實現(xiàn)，不依賴任何框架。

基于 hash 實現(xiàn)

運行效果：

HTML 部分：

JavaScript 部分：

基于 history 實現(xiàn)

運行效果：

HTML 部分：

• home
• about

JavaScript 部分：

React 版前端路由實現(xiàn)

基于 hash 實現(xiàn)

運行效果：

使用方式和 react-router 類似：

home about

Home

} />

About

} />

BrowserRouter 實現(xiàn)

Route 實現(xiàn)

export default ({ path, render }) => ( {({currentPath}) => currentPath === path && render()} );

Link 實現(xiàn)

export default ({ to, ...props }) => ;

基于 history 實現(xiàn)

運行效果：

使用方式和 react-router 類似：

home about

Home

} />

About

} />

HistoryRouter 實現(xiàn)

Route 實現(xiàn)

export default ({ path, render }) => ( {({currentPath}) => currentPath === path && render()} );

Link 實現(xiàn)

Vue 版本前端路由實現(xiàn)

基于 hash 實現(xiàn)

運行效果：

使用方式和 vue-router 類似(vue-router 通過插件機制注入路由，但是這樣隱藏了實現(xiàn)細(xì)節(jié)，為了保持代碼直觀，這里沒有使用 Vue 插件封裝)：

home about

router-view 實現(xiàn)

router-link 實現(xiàn)

基于 history 實現(xiàn)

運行效果：

使用方式和 vue-router 類似：

home about

router-view 實現(xiàn)：

router-link 實現(xiàn)

小結(jié)

前端路由的核心實現(xiàn)原理很簡單，但是結(jié)合具體框架后，框架增加了很多特性，如動態(tài)路由、路由參數(shù)、路由動畫等等，這些導(dǎo)致路由實現(xiàn)變的復(fù)雜。本文去粗取精只針對前端路由最核心部分的實現(xiàn)進行分析，并基于 hash 和 history 兩種模式，分別提供原生JS/React/Vue 三種實現(xiàn)，共計六個實現(xiàn)版本供參考，希望對你有所幫助。

所有的示例的代碼放在 Github 倉庫：https://github.com/whinc/web-router-principle

參考

• 詳解單頁面路由的幾種實現(xiàn)原理
• http://www.cnblogs.com/xiaobie123/p/6357724.html
• 單頁面應(yīng)用路由實現(xiàn)原理：以 React-Router 為例
• https://github.com/youngwind/blog/issues/109

總結(jié)

以上是生活随笔為你收集整理的react router 级联路由_前端路由原理解析和实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。