令人惊叹的前端路由原理解析和实现方式
在單頁應(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 行左右（含空行）。
什么是前端路由？
路由的概念來源于服務(wù)端，在服務(wù)端中路由描述的是 URL 與處理函數(shù)之間的映射關(guān)系。
在 Web 前端單頁應(yīng)用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關(guān)系，這種映射是單向的，即 URL 變化引起 UI 更新（無需刷新頁面）。
如何實(shí)現(xiàn)前端路由？
要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心問題：
如何改變 URL 卻不引起頁面刷新？
如何檢測(cè) URL 變化了？
下面分別使用 hash 和 history 兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問題。
hash 實(shí)現(xiàn)
hash 是 URL 中 hash (#) 及后面的那部分，常用作錨點(diǎn)在頁面內(nèi)進(jìn)行導(dǎo)航，改變 URL 中的 hash 部分不會(huì)引起頁面刷新
通過 hashchange 事件監(jiān)聽 URL 的變化，改變 URL 的方式只有這幾種：通過瀏覽器前進(jìn)后退改變 URL、通過標(biāo)簽改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會(huì)觸發(fā) hashchange 事件
history 實(shí)現(xiàn)
history 提供了 pushState 和 replaceState 兩個(gè)方法，這兩個(gè)方法改變 URL 的 path 部分不會(huì)引起頁面刷新
history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進(jìn)后退改變 URL 時(shí)會(huì)觸發(fā) popstate 事件，通過pushState/replaceState或標(biāo)簽改變 URL 不會(huì)觸發(fā) popstate 事件。好在我們可以攔截 pushState/replaceState的調(diào)用和標(biāo)簽的點(diǎn)擊事件來檢測(cè) URL 變化，所以監(jiān)聽 URL 變化可以實(shí)現(xiàn)，只是沒有 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 部分：
<body><ul><!--?定義路由?--><li><a?href="#/home">home</a></li><li><a?href="#/about">about</a></li><!--?渲染路由對(duì)應(yīng)的?UI?--><div?id="routeView"></div></ul> </body>JavaScript 部分：
//?頁面加載完不會(huì)觸發(fā)?hashchange，這里主動(dòng)觸發(fā)一次?hashchange?事件 window.addEventListener('DOMContentLoaded',?onLoad) //?監(jiān)聽路由變化 window.addEventListener('hashchange',?onHashChange)//?路由視圖 var?routerView?=?nullfunction?onLoad?()?{routerView?=?document.querySelector('#routeView')onHashChange() }//?路由變化時(shí)，根據(jù)路由渲染對(duì)應(yīng)?UI function?onHashChange?()?{switch?(location.hash)?{case?'#/home':routerView.innerHTML?=?'Home'returncase?'#/about':routerView.innerHTML?=?'About'returndefault:return} }基于 history 實(shí)現(xiàn)
運(yùn)行效果：
HTML 部分：
<body><ul><li><a?href='/home'>home</a></li><li><a?href='/about'>about</a></li><div?id="routeView"></div></ul> </body>JavaScript 部分：
//?頁面加載完不會(huì)觸發(fā)?hashchange，這里主動(dòng)觸發(fā)一次?hashchange?事件 window.addEventListener('DOMContentLoaded',?onLoad) //?監(jiān)聽路由變化 window.addEventListener('popstate',?onPopState)//?路由視圖 var?routerView?=?nullfunction?onLoad?()?{routerView?=?document.querySelector('#routeView')onPopState()//?攔截?<a>?標(biāo)簽點(diǎn)擊事件默認(rèn)行為，?點(diǎn)擊時(shí)使用 pushState 修改 URL并更新手動(dòng) UI，從而實(shí)現(xiàn)點(diǎn)擊鏈接更新 URL 和 UI 的效果。var?linkList?=?document.querySelectorAll('a[href]')linkList.forEach(el?=>?el.addEventListener('click',?function?(e)?{e.preventDefault()history.pushState(null,?'',?el.getAttribute('href'))onPopState()})) }//?路由變化時(shí)，根據(jù)路由渲染對(duì)應(yīng)?UI function?onPopState?()?{switch?(location.pathname)?{case?'/home':routerView.innerHTML?=?'Home'returncase?'/about':routerView.innerHTML?=?'About'returndefault:return} }React 版前端路由實(shí)現(xiàn)
基于 hash 實(shí)現(xiàn)
運(yùn)行效果：
使用方式和 react-router 類似：
??<BrowserRouter><ul><li><Link?to="/home">home</Link></li><li><Link?to="/about">about</Link></li></ul><Route?path="/home"?render={()?=>?<h2>Home</h2>}?/><Route?path="/about"?render={()?=>?<h2>About</h2>}?/></BrowserRouter>BrowserRouter 實(shí)現(xiàn)
export?default?class?BrowserRouter?extends?React.Component?{state?=?{currentPath:?utils.extractHashPath(window.location.href)};onHashChange?=?e?=>?{const?currentPath?=?utils.extractHashPath(e.newURL);console.log("onHashChange:",?currentPath);this.setState({?currentPath?});};componentDidMount()?{window.addEventListener("hashchange",?this.onHashChange);}componentWillUnmount()?{window.removeEventListener("hashchange",?this.onHashChange);}render()?{return?(<RouteContext.Provider?value={{currentPath:?this.state.currentPath}}>{this.props.children}</RouteContext.Provider>);} }Route 實(shí)現(xiàn)
export?default?({?path,?render?})?=>?(<RouteContext.Consumer>{({currentPath})?=>?currentPath?===?path?&&?render()}</RouteContext.Consumer> );Link 實(shí)現(xiàn)
export?default?({?to,?...props?})?=>?<a?{...props}?href={"#"?+?to}?/>;基于 history 實(shí)現(xiàn)
運(yùn)行效果：
使用方式和 react-router 類似：
??<HistoryRouter><ul><li><Link?to="/home">home</Link></li><li><Link?to="/about">about</Link></li></ul><Route?path="/home"?render={()?=>?<h2>Home</h2>}?/><Route?path="/about"?render={()?=>?<h2>About</h2>}?/></HistoryRouter>HistoryRouter 實(shí)現(xiàn)：
export?default?class?HistoryRouter?extends?React.Component?{state?=?{currentPath:?utils.extractUrlPath(window.location.href)};onPopState?=?e?=>?{const?currentPath?=?utils.extractUrlPath(window.location.href);console.log("onPopState:",?currentPath);this.setState({?currentPath?});};componentDidMount()?{window.addEventListener("popstate",?this.onPopState);}componentWillUnmount()?{window.removeEventListener("popstate",?this.onPopState);}render()?{return?(<RouteContext.Provider?value={{currentPath:?this.state.currentPath,?onPopState:?this.onPopState}}>{this.props.children}</RouteContext.Provider>);} }Route 實(shí)現(xiàn)
export?default?({?path,?render?})?=>?(<RouteContext.Consumer>{({currentPath})?=>?currentPath?===?path?&&?render()}</RouteContext.Consumer> );Link 實(shí)現(xiàn)
export?default?({?to,?...props?})?=>?(<RouteContext.Consumer>{({?onPopState?})?=>?(<ahref=""{...props}onClick={e?=>?{e.preventDefault();window.history.pushState(null,?"",?to);onPopState();}}/>)}</RouteContext.Consumer> );Vue 版本前端路由實(shí)現(xiàn)
基于 hash 實(shí)現(xiàn)
運(yùn)行效果：
使用方式和 vue-router 類似（vue-router 通過插件機(jī)制注入路由，但是這樣隱藏了實(shí)現(xiàn)細(xì)節(jié)，為了保持代碼直觀，這里沒有使用 Vue 插件封裝）：
????<div><ul><li><router-link?to="/home">home</router-link></li><li><router-link?to="/about">about</router-link></li></ul><router-view></router-view></div> const?routes?=?{'/home':?{template:?'<h2>Home</h2>'},'/about':?{template:?'<h2>About</h2>'} }const?app?=?new?Vue({el:?'.vue.hash',components:?{'router-view':?RouterView,'router-link':?RouterLink},beforeCreate?()?{this.$routes?=?routes} })router-view 實(shí)現(xiàn):
<template><component?:is="routeView"?/> </template><script> import?utils?from?'~/utils.js' export?default?{data?()?{return?{routeView:?null}},created?()?{this.boundHashChange?=?this.onHashChange.bind(this)},beforeMount?()?{window.addEventListener('hashchange',?this.boundHashChange)},mounted?()?{this.onHashChange()},beforeDestroy()?{window.removeEventListener('hashchange',?this.boundHashChange)},methods:?{onHashChange?()?{const?path?=?utils.extractHashPath(window.location.href)this.routeView?=?this.$root.$routes[path]?||?nullconsole.log('vue:hashchange:',?path)}} } </script>router-link 實(shí)現(xiàn):
<template><a?@click.prevent="onClick"?href=''><slot></slot></a> </template><script> export?default?{props:?{to:?String},methods:?{onClick?()?{window.location.hash?=?'#'?+?this.to}} } </script>基于 history 實(shí)現(xiàn)
運(yùn)行效果：
使用方式和 vue-router 類似：
????<div><ul><li><router-link?to="/home">home</router-link></li><li><router-link?to="/about">about</router-link></li></ul><router-view></router-view></div> const?routes?=?{'/home':?{template:?'<h2>Home</h2>'},'/about':?{template:?'<h2>About</h2>'} }const?app?=?new?Vue({el:?'.vue.history',components:?{'router-view':?RouterView,'router-link':?RouterLink},created?()?{this.$routes?=?routesthis.boundPopState?=?this.onPopState.bind(this)},beforeMount?()?{window.addEventListener('popstate',?this.boundPopState)?},beforeDestroy?()?{window.removeEventListener('popstate',?this.boundPopState)?},methods:?{onPopState?(...args)?{this.$emit('popstate',?...args)}} })router-view 實(shí)現(xiàn)：
<template><component?:is="routeView"?/> </template><script> import?utils?from?'~/utils.js' export?default?{data?()?{return?{routeView:?null}},created?()?{this.boundPopState?=?this.onPopState.bind(this)},beforeMount?()?{this.$root.$on('popstate',?this.boundPopState)},beforeDestroy()?{this.$root.$off('popstate',?this.boundPopState)},methods:?{onPopState?(e)?{const?path?=?utils.extractUrlPath(window.location.href)this.routeView?=?this.$root.$routes[path]?||?nullconsole.log('[Vue]?popstate:',?path)}} } </script>router-link 實(shí)現(xiàn):
<template><a?@click.prevent="onClick"?href=''><slot></slot></a> </template><script> export?default?{props:?{to:?String},methods:?{onClick?()?{history.pushState(null,?'',?this.to)this.$root.$emit('popstate')}} } </script>小結(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
參考
詳解單頁面路由的幾種實(shí)現(xiàn)原理
單頁面應(yīng)用路由實(shí)現(xiàn)原理：以 React-Router 為例
總結(jié)
以上是生活随笔為你收集整理的令人惊叹的前端路由原理解析和实现方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Clickhouse 在腾讯的应用实践
- 下一篇： HTML 文件在PC移动端完美自适应布局