前端路由原理解析和實現

whinc發表於2019-05-13

在單頁應用如此流行的今天，曾經令人驚歎的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的複雜。想要搞懂路由內部實現還是有些困難的，但是如果只想瞭解路由實現基本原理還是比較簡單的。本文針對前端路由主流的實現方式 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 部分不會引起頁面重新整理
通過 haschange 事件監聽 URL 的變化，改變 URL 的方式只有這幾種：通過瀏覽器前進後退改變 URL、通過<a>標籤改變 URL、通過window.location改變URL，這幾種情況改變 URL 都會觸發 hashchange 事件

history 實現

history 提供了 pushstate 和 popstate 兩個方法，這兩個方法改變 URL 的 path 部分不會引起頁面重新整理
history 提供類似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通過瀏覽器前進後退改變 URL 時會觸發 popstate 事件，通過pushstate/popstate或<a>標籤改變 URL 不會觸發 popstate 事件。好在我們可以攔截 pushstate/popstate的呼叫和<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 實現

  <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>
複製程式碼

Route 實現

  <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>
複製程式碼

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 外掛封裝）：

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 實現

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-link 實現

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
  }
})
複製程式碼

基於 history 實現

執行效果：

使用方式和 vue-router 類似：

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 實現：

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-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…

參考

前端路由的原理和實現
2019-04-28
前端路由
前端路由實現原理
2018-03-02
前端路由
前端路由的實現原理
2019-07-26
前端路由
前端路由實現原理（history）
2018-07-08
前端路由
淺談：前端路由原理解析及實踐
2021-07-21
前端路由
前端路由簡介以及vue-router實現原理
2019-03-04
前端路由Vue
vue 單頁應用（spa）前端路由實現原理
2018-03-31
Vue前端路由
各種前端框架中的路由原理解析
2017-04-21
前端框架路由
你女友都懂前端路由和react-router實現原理了，你還不懂。
2020-03-17
前端路由React
前端兩種路由實現和使用場景
2020-01-30
前端路由
前端路由原理之 hash 模式和 history 模式
2021-09-10
前端路由模式
Flutter 路由原理解析
2019-03-17
Flutter路由
http 框架的路由實現原理
2020-03-01
HTTP框架路由
codeigniter路由實現原理
2015-04-27
路由
KOA2框架原理解析和實現
2018-11-08
框架
前端路由的實現(三) —— History的pushState和replaceState用法
2018-04-24
前端路由
單頁面路由原理及實現
2018-08-27
路由
解析HetuEngine實現On Yarn原理
2022-01-12
Yarn
前端路由和後端路由，前端渲染和後端渲染
2021-09-09
前端路由後端
SPA路由實現的基本原理
2023-02-22
路由
原生 js 實現一個前端路由 router
2019-02-16
JS前端路由
自己動手實現一個前端路由
2018-11-18
前端路由
SpringMVC實現原理及解析
2018-10-28
SpringMVC
解析 iOS 動畫原理與實現
2016-03-15
iOS動畫
前端模板的原理與實現
2016-09-26
前端
前端框架路由實現的Hash和History兩種模式的區別
2019-10-18
前端框架路由模式
前端路由跳轉基本原理
2019-02-01
前端路由
前端單頁路由《stateman》原始碼解析
2019-03-03
前端路由原始碼
深入原始碼解析 tapable 實現原理
2019-11-05
原始碼
JavaScript 預解析的原理及實現
2015-03-09
JavaScript
前端動畫實現以及原理淺析
2022-05-19
前端動畫
[實踐系列] 前端路由
2019-01-11
前端路由
聊聊微前端的原理和實踐
2020-07-27
前端
微服務架構的核心要點和實現原理解析
2018-08-28
微服務架構
前端路由實現與 react-router 原始碼分析
2016-06-12
前端路由React原始碼
Android SharedPreferences 實現原理解析
2019-03-19
Android
CSS實現元素居中原理解析
2018-10-12
CSS
Netty原始碼解析 -- PoolSubpage實現原理
2020-12-19
Netty原始碼

前端路由原理解析和實現

什麼是前端路由？

如何實現前端路由？

原生JS版前端路由實現

基於 hash 實現

基於 history 實現

React 版前端路由實現

基於 hash 實現

基於 history 實現

Vue 版本前端路由實現

基於 hash 實現

基於 history 實現

小結

參考

相關文章