令人惊叹的前端路由原理解析和实现方式
在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果只想了解路由實現基本原理還是比較簡單的。本文針對前端路由主流的實現方式 hash 和 history，提供了原生JS/React/Vue 共計六個版本供參考，每個版本的實現代碼約 25~40 行左右（含空行）。
什么是前端路由？
路由的概念來源于服務端，在服務端中路由描述的是 URL 與處理函數之間的映射關系。
在 Web 前端單頁應用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關系，這種映射是單向的，即 URL 變化引起 UI 更新（無需刷新頁面）。
如何實現前端路由？
要實現前端路由，需要解決兩個核心問題：
如何改變 URL 卻不引起頁面刷新？
如何檢測 URL 變化了？
下面分別使用 hash 和 history 兩種實現方式回答上面的兩個核心問題。
hash 實現
hash 是 URL 中 hash (#) 及后面的那部分，常用作錨點在頁面內進行導航，改變 URL 中的 hash 部分不會引起頁面刷新
通過 hashchange 事件監聽 URL 的變化，改變 URL 的方式只有這幾種：通過瀏覽器前進后退改變 URL、通過標簽改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會觸發 hashchange 事件
history 實現
history 提供了 pushState 和 replaceState 兩個方法，這兩個方法改變 URL 的 path 部分不會引起頁面刷新
history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進后退改變 URL 時會觸發 popstate 事件，通過pushState/replaceState或標簽改變 URL 不會觸發 popstate 事件。好在我們可以攔截 pushState/replaceState的調用和標簽的點擊事件來檢測 URL 變化，所以監聽 URL 變化可以實現，只是沒有 hashchange 那么方便。
原生JS版前端路由實現
基于上節討論的兩種實現方式，分別實現 hash 版本和 history 版本的路由，示例使用原生 HTML/JS 實現，不依賴任何框架。
基于 hash 實現
運行效果：
HTML 部分：
<body><ul><!--?定義路由?--><li><a?href="#/home">home</a></li><li><a?href="#/about">about</a></li><!--?渲染路由對應的?UI?--><div?id="routeView"></div></ul> </body>JavaScript 部分：
//?頁面加載完不會觸發?hashchange，這里主動觸發一次?hashchange?事件 window.addEventListener('DOMContentLoaded',?onLoad) //?監聽路由變化 window.addEventListener('hashchange',?onHashChange)//?路由視圖 var?routerView?=?nullfunction?onLoad?()?{routerView?=?document.querySelector('#routeView')onHashChange() }//?路由變化時，根據路由渲染對應?UI function?onHashChange?()?{switch?(location.hash)?{case?'#/home':routerView.innerHTML?=?'Home'returncase?'#/about':routerView.innerHTML?=?'About'returndefault:return} }基于 history 實現
運行效果：
HTML 部分：
<body><ul><li><a?href='/home'>home</a></li><li><a?href='/about'>about</a></li><div?id="routeView"></div></ul> </body>JavaScript 部分：
//?頁面加載完不會觸發?hashchange，這里主動觸發一次?hashchange?事件 window.addEventListener('DOMContentLoaded',?onLoad) //?監聽路由變化 window.addEventListener('popstate',?onPopState)//?路由視圖 var?routerView?=?nullfunction?onLoad?()?{routerView?=?document.querySelector('#routeView')onPopState()//?攔截?<a>?標簽點擊事件默認行為，?點擊時使用 pushState 修改 URL并更新手動 UI，從而實現點擊鏈接更新 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()})) }//?路由變化時，根據路由渲染對應?UI function?onPopState?()?{switch?(location.pathname)?{case?'/home':routerView.innerHTML?=?'Home'returncase?'/about':routerView.innerHTML?=?'About'returndefault:return} }React 版前端路由實現
基于 hash 實現
運行效果：
使用方式和 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 實現
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 實現
export?default?({?path,?render?})?=>?(<RouteContext.Consumer>{({currentPath})?=>?currentPath?===?path?&&?render()}</RouteContext.Consumer> );Link 實現
export?default?({?to,?...props?})?=>?<a?{...props}?href={"#"?+?to}?/>;基于 history 實現
運行效果：
使用方式和 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 實現：
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 實現
export?default?({?path,?render?})?=>?(<RouteContext.Consumer>{({currentPath})?=>?currentPath?===?path?&&?render()}</RouteContext.Consumer> );Link 實現
export?default?({?to,?...props?})?=>?(<RouteContext.Consumer>{({?onPopState?})?=>?(<ahref=""{...props}onClick={e?=>?{e.preventDefault();window.history.pushState(null,?"",?to);onPopState();}}/>)}</RouteContext.Consumer> );Vue 版本前端路由實現
基于 hash 實現
運行效果：
使用方式和 vue-router 類似（vue-router 通過插件機制注入路由，但是這樣隱藏了實現細節，為了保持代碼直觀，這里沒有使用 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 實現:
<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 實現:
<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 實現
運行效果：
使用方式和 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 實現：
<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 實現:
<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>小結
前端路由的核心實現原理很簡單，但是結合具體框架后，框架增加了很多特性，如動態路由、路由參數、路由動畫等等，這些導致路由實現變的復雜。本文去粗取精只針對前端路由最核心部分的實現進行分析，并基于 hash 和 history 兩種模式，分別提供原生JS/React/Vue 三種實現，共計六個實現版本供參考，希望對你有所幫助。
所有的示例的代碼放在 Github 倉庫：
https://github.com/whinc/web-router-principle
參考
詳解單頁面路由的幾種實現原理
單頁面應用路由實現原理：以 React-Router 為例
總結
以上是生活随笔為你收集整理的令人惊叹的前端路由原理解析和实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Clickhouse 在腾讯的应用实践
- 下一篇： 国产数据库领域屡次率先突破，腾讯TDSQ