前端路由原理解析和實現

時間  2019-12-07
標籤 前端 路由 原理 解析 實現 欄目 系統網絡 简体版
原文   原文鏈接

在單頁應用如此流行的今天，曾經使人驚歎的前端路由已經成爲各大框架的基礎標配，每一個框架都提供了強大的路由功能，致使路由實現變的複雜。想要搞懂路由內部實現仍是有些困難的，可是若是隻想了解路由實現基本原理仍是比較簡單的。本文針對前端路由主流的實現方式 hash 和 history，提供了原生JS/React/Vue 共計六個版本供參考，每一個版本的實現代碼約 25~40 行左右（含空行）。html

什麼是前端路由？

路由的概念來源於服務端，在服務端中路由描述的是 URL 與處理函數之間的映射關係。前端

在 Web 前端單頁應用 SPA(Single Page Application)中，路由描述的是 URL 與 UI 之間的映射關係，這種映射是單向的，即 URL 變化引發 UI 更新（無需刷新頁面）。vue

如何實現前端路由？

要實現前端路由，須要解決兩個核心：react

  • 如何改變 URL 卻不引發頁面刷新？git

  • 如何檢測 URL 變化了？github

下面分別使用 hash 和 history 兩種實現方式回答上面的兩個核心問題。web

hash 實現

  • hash 是 URL 中 hash (#) 及後面的那部分，經常使用做錨點在頁面內進行導航，改變 URL 中的 hash 部分不會引發頁面刷新vue-router

  • 經過 hashchange 事件監聽 URL 的變化，改變 URL 的方式只有這幾種：經過瀏覽器前進後退改變 URL、經過<a>標籤改變 URL、經過window.location改變URL，這幾種狀況改變 URL 都會觸發 hashchange 事件瀏覽器

history 實現

  • history 提供了 pushState 和 replaceState 兩個方法，這兩個方法改變 URL 的 path 部分不會引發頁面刷新react-router

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

js:

// 頁面加載完不會觸發 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 倉庫：https://github.com/whinc/web-router-principle
 

參考
 

     
 
  •  
    詳解單頁面路由的幾種實現原理
     
    http://www.cnblogs.com/xiaobie123/p/6357724.html
     
    •  
 
  •  
    單頁面應用路由實現原理：以 React-Router 爲例
     
    https://github.com/youngwind/blog/issues/109
     
    •   



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程