前端路由原理解析和實現

lavor 發布于2019-05-23 16:28 / 3077人閱讀

摘要：如何實現前端路由要實現前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實現方式回答上面的兩個核心問題。

原文鏈接：github.com/whinc/blog/…

在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果只想了解路由實現基本原理還是比較簡單的。本文針對前端路由主流的實現方式 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">homea>li>
    <li><a href="#/about">abouta>li>

    
    <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">homea>li>
    <li><a href="/about">abouta>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()

  // 攔截  標簽點擊事件默認行為， 點擊時使用 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 類似：

  
    <ul>
      <li>
        <Link to="/home">homeLink>
      li>
      <li>
        <Link to="/about">aboutLink>
      li>
    ul>

    "/home" render={() => <h2>Homeh2>} />
    <Route path="/about" render={() => <h2>Abouth2>} />
  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 類似：

  
    <ul>
      <li>
        <Link to="/home">homeLink>
      li>
      <li>
        <Link to="/about">aboutLink>
      li>
    ul>

    "/home" render={() => <h2>Homeh2>} />
    <Route path="/about" render={() => <h2>Abouth2>} />
  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 }) => (
  
    {({ onPopState }) => (
       {
          e.preventDefault();
          window.history.pushState(null, "", to);
          onPopState();
        }}
      />
    )}
  
);

Vue 版本前端路由實現 基于 hash 實現

運行效果：

使用方式和 vue-router 類似（vue-router 通過插件機制注入路由，但是這樣隱藏了實現細節，為了保持代碼直觀，這里沒有使用 Vue 插件封裝）：

    <div>
      <ul>
        <li><router-link to="/home">homerouter-link>li>
        <li><router-link to="/about">aboutrouter-link>li>
      ul>
      <router-view>router-view>
    div>

const routes = {
  "/home": {
    template: "Home
"
  },
  "/about": {
    template: "About
"
  }
}

const app = new Vue({
  el: ".vue.hash",
  components: {
    "router-view": RouterView,
    "router-link": RouterLink
  },
  beforeCreate () {
    this.$routes = routes
  }
})

router-view 實現

router-link 實現

基于 history 實現

運行效果：

使用方式和 vue-router 類似：

    <div>
      <ul>
        <li><router-link to="/home">homerouter-link>li>
        <li><router-link to="/about">aboutrouter-link>li>
      ul>
      <router-view>router-view>
    div>

const routes = {
  "/home": {
    template: "Home
"
  },
  "/about": {
    template: "About
"
  }
}

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

router-link 實現

小結

前端路由的核心實現原理很簡單，但是結合具體框架后，框架增加了很多特性，如動態路由、路由參數、路由動畫等等，這些導致路由實現變的復雜。本文去粗取精只針對前端路由最核心部分的實現進行分析，并基于 hash 和 history 兩種模式，分別提供原生JS/React/Vue 三種實現，共計六個實現版本供參考，希望對你有所幫助。

所有的示例的代碼放在 Github 倉庫：github.com/whinc/web-r…

參考

詳解單頁面路由的幾種實現原理

單頁面應用路由實現原理：以 React-Router 為例

GPU云服務器云服務器 js前端路由原理 linux路由原理前端路由 js前端路由

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7258.html

前端路由簡介以及vue-router實現原理

摘要：后端路由簡介路由這個概念最先是后端出現的。前端路由模式隨著的流行，異步數據請求交互運行在不刷新瀏覽器的情況下進行。通過這些就能用另一種方式來實現前端路由了，但原理都是跟實現相同的。后端路由簡介路由這個概念最先是后端出現的。在以前用模板引擎開發頁面時，經常會看到這樣 http://www.xxx.com/login 大致流程可以看成這樣：瀏覽器發出請求服務器監聽到80端口（或4...

tuomao 2019-08-26 11:56 評論0 收藏0
自己動手實現一個前端路由

摘要：監聽的變動省略其他代碼省略其他代碼這樣，我們就初步實現了一個路由，那么接下來，我們來看看路由怎么實現。前言用過現代前端框架的同學，對前端路由一定不陌生, vue, react, angular 都有自己的 router, 那么你對 router 的工作原理了解嗎？如果還不了解, 那么請跟我一起來手寫一個簡單的前端路由, 順便了解一下. 實現路由的2種方式 hash模式 histo...

longshengwang 2019-08-22 18:22 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

xingqiba 2019-08-23 15:25 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

quietin 2019-08-02 14:19 評論0 收藏0