在單頁應用如此流行的今天，曾經令人驚歎的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的複雜。想要搞懂路由內部實現還是有些困難的，但是如果只想瞭解路由實現基本原理還是比較簡單的。本文針對前端路由主流的實現方式 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、通過
<a>標籤改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會觸發 hashchange 事件
history 實現
- history 提供了 pushState 和 replaceState 兩個方法，這兩個方法改變 URL 的 path 部分不會引起頁面重新整理
- history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進後退改變 URL 時會觸發 popstate 事件，通過
pushState/replaceState或<a>標籤改變 URL 不會觸發 popstate 事件。好在我們可以攔截pushState/replaceState的呼叫和<a>標籤的點選事件來檢測 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 = 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
}
}
複製程式碼基於 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 = 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 版前端路由實現
基於 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 }) => (
<a
href=""
{...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] || 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>
複製程式碼基於 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 = 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…