react router 级联路由_前端路由原理解析和实现
在單頁應(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 aboutHome
} />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 aboutHome
} />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 aboutrouter-view 實現(xiàn)
router-link 實現(xiàn)
基于 history 實現(xiàn)
運行效果:
使用方式和 vue-router 類似:
home aboutrouter-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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 高斯-赛得尔迭代式 c++_高斯混合模型
- 下一篇: dio 上传文件报错_Vue+Eleme