原文連接:github.com/whinc/blog/…html
在單頁應用如此流行的今天,曾經使人驚歎的前端路由已經成爲各大框架的基礎標配,每一個框架都提供了強大的路由功能,致使路由實現變的複雜。想要搞懂路由內部實現仍是有些困難的,可是若是隻想了解路由實現基本原理仍是比較簡單的。本文針對前端路由主流的實現方式 hash 和 history,提供了原生JS/React/Vue 共計六個版本供參考,每一個版本的實現代碼約 25~40 行左右(含空行)。前端
路由的概念來源於服務端,在服務端中路由描述的是 URL 與處理函數之間的映射關係。vue
在 Web 前端單頁應用 SPA(Single Page Application)中,路由描述的是 URL 與 UI 之間的映射關係,這種映射是單向的,即 URL 變化引發 UI 更新(無需刷新頁面)。react
要實現前端路由,須要解決兩個核心:git
下面分別使用 hash 和 history 兩種實現方式回答上面的兩個核心問題。github
hash 實現web
#
) 及後面的那部分,經常使用做錨點在頁面內進行導航,改變 URL 中的 hash 部分不會引發頁面刷新<a>
標籤改變 URL、經過window.location
改變URL,這幾種狀況改變 URL 都會觸發 hashchange 事件history 實現vue-router
pushState/replaceState
或<a>
標籤改變 URL 不會觸發 popstate 事件。好在咱們能夠攔截 pushState/replaceState
的調用和<a>
標籤的點擊事件來檢測 URL 變化,因此監聽 URL 變化能夠實現,只是沒有 hashchange 那麼方便。基於上節討論的兩種實現方式,分別實現 hash 版本和 history 版本的路由,示例使用原生 HTML/JS 實現,不依賴任何框架。瀏覽器
運行效果: markdown
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 = null function onLoad () { routerView = document.querySelector('#routeView') onHashChange() } // 路由變化時,根據路由渲染對應 UI function onHashChange () { switch (location.hash) { case '#/home': routerView.innerHTML = 'Home' return case '#/about': routerView.innerHTML = 'About' return default: return } } 複製代碼
運行效果:
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 = null function 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' return case '/about': routerView.innerHTML = 'About' return default: return } } 複製代碼
運行效果:
使用方式和 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} />; 複製代碼
運行效果:
使用方式和 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 }) => ( <a href="" {...props} onClick={e => { e.preventDefault(); window.history.pushState(null, "", to); onPopState(); }} /> )} </RouteContext.Consumer> ); 複製代碼
運行效果:
使用方式和 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] || null
console.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>
複製代碼
運行效果:
使用方式和 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 = routes this.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] || null
console.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 倉庫:github.com/whinc/web-r…