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

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

什么是前端路由？

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

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

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

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

• 如何改變 URL 卻不引起頁(yè)面刷新？
• 如何檢測(cè) URL 變化了？

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

hash 實(shí)現(xiàn)

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

history 實(shí)現(xiàn)

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

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

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

基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

HTML 部分：

JavaScript 部分：

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

HTML 部分：

• home
• about

JavaScript 部分：

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

基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 react-router 類似：

home about

Home

} />

About

} />

BrowserRouter 實(shí)現(xiàn)

Route 實(shí)現(xiàn)

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

Link 實(shí)現(xiàn)

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

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 react-router 類似：

home about

Home

} />

About

} />

HistoryRouter 實(shí)現(xiàn)

Route 實(shí)現(xiàn)

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

Link 實(shí)現(xiàn)

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

基于 hash 實(shí)現(xiàn)

運(yùn)行效果：

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

home about

router-view 實(shí)現(xiàn)

router-link 實(shí)現(xiàn)

基于 history 實(shí)現(xiàn)

運(yùn)行效果：

使用方式和 vue-router 類似：

home about

router-view 實(shí)現(xiàn)：

router-link 實(shí)現(xiàn)

小結(jié)

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

所有的示例的代碼放在 Github 倉(cāng)庫(kù)：https://github.com/whinc/web-router-principle

參考

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

總結(jié)

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

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