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

時間  2019-11-07
標籤 前端 路由 簡介 以及 vue router 實現 原理 欄目 系統網絡 简体版
原文   原文鏈接

後端路由簡介

路由這個概念最早是後端出現的。在之前用模板引擎開發頁面時，常常會看到這樣html

http://www.xxx.com/login
複製代碼

大體流程能夠當作這樣：前端

  1. 瀏覽器發出請求vue

  2. 服務器監聽到80端口（或443）有請求過來，並解析url路徑git

  3. 根據服務器的路由配置，返回相應信息（能夠是 html 字串，也能夠是 json 數據，圖片等）github

  4. 瀏覽器根據數據包的 Content-Type 來決定如何解析數據ajax

簡單來講路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能。vue-router

前端路由

1. hash 模式

隨着 ajax 的流行，異步數據請求交互運行在不刷新瀏覽器的狀況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應用。單頁應用不只僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，爲了實現單頁應用，因此就有了前端路由。 相似於服務端路由，前端路由實現起來其實也很簡單，就是匹配不一樣的 url 路徑，進行解析，而後動態的渲染出區域 html 內容。可是這樣存在一個問題，就是 url 每次變化的時候，都會形成頁面的刷新。那解決問題的思路即是在改變 url 的狀況下，保證頁面的不刷新。在 2014 年以前，你們是經過 hash 來實現路由，url hash 就是相似於：express

http://www.xxx.com/#/login
複製代碼

這種 #。後面 hash 值的變化，並不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發hashchange 這個事件，經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange來實現更新頁面部份內容的操做：json

function matchAndUpdate () {
   // todo 匹配 hash 作 dom 更新操做
}

window.addEventListener('hashchange', matchAndUpdate)
複製代碼

2. history 模式

14年後，由於HTML5標準發佈。多了兩個 API，pushState 和 replaceState，經過這兩個 API 能夠改變 url 地址且不會發送請求。同時還有popstate 事件。經過這些就能用另外一種方式來實現前端路由了，但原理都是跟 hash 實現相同的。用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但由於沒有 # 號，因此當用戶刷新頁面之類的操做時，瀏覽器仍是會給服務器發送請求。爲了不出現這種狀況，因此這個實現須要服務器的支持，須要把全部路由都重定向到根頁面。後端

function matchAndUpdate () {
   // todo 匹配路徑 作 dom 更新操做
}

window.addEventListener('popstate', matchAndUpdate)
複製代碼

Vue router 實現

咱們來看一下vue-router是如何定義的：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

new Vue({
  router
  ...
})
複製代碼

能夠看出來vue-router是經過 Vue.use的方法被注入進 Vue 實例中，在使用的時候咱們須要全局用到 vue-router的router-view和router-link組件，以及this.$router/$route這樣的實例對象。那麼是如何實現這些操做的呢？下面我會分幾個章節詳細的帶你進入vue-router的世界。

vue-router 實現 -- install

vue-router 實現 -- new VueRouter(options)

vue-router 實現 -- HashHistory

vue-router 實現 -- HTML5History

vue-router 實現 -- 路由變動監聽

造輪子 -- 動手實現一個數據驅動的 router

通過上面的闡述，相信您已經對前端路由以及vue-router有了一些大體的瞭解。那麼這裏咱們爲了貫徹無解肥，咱們來手把手擼一個下面這樣的數據驅動的 router：

new Router({
  id: 'router-view', // 容器視圖
  mode: 'hash', // 模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: '<div>Home</div>',
      beforeEnter: (next) => {
        console.log('before enter home')
        next()
      },
      afterEnter: (next) => {
        console.log('enter home')
        next()
      },
      beforeLeave: (next) => {
        console.log('start leave home')
        next()
      }
    },
    {
      path: '/bar',
      name: 'bar',
      component: '<div>Bar</div>',
      beforeEnter: (next) => {
        console.log('before enter bar')
        next()
      },
      afterEnter: (next) => {
        console.log('enter bar')
        next()
      },
      beforeLeave: (next) => {
        console.log('start leave bar')
        next()
      }
    },
    {
      path: '/foo',
      name: 'foo',
      component: '<div>Foo</div>'
    }
  ]
})
複製代碼

思路整理

首先是數據驅動，因此咱們能夠經過一個route對象來表述當前路由狀態，好比：

current = {
    path: '/', // 路徑
    query: {}, // query
    params: {}, // params
    name: '', // 路由名
    fullPath: '/', // 完整路徑
    route: {} // 記錄當前路由屬性
}
複製代碼

current.route內存放當前路由的配置信息，因此咱們只須要監聽current.route的變化來動態render頁面即可。

接着我麼須要監聽不一樣的路由變化，作相應的處理。以及實現hash和history模式。

數據驅動

這裏咱們延用vue數據驅動模型，實現一個簡單的數據劫持，並更新視圖。首先定義咱們的observer

class Observer {
  constructor (value) {
    this.walk(value)
  }

  walk (obj) {
    Object.keys(obj).forEach((key) => {
      // 若是是對象，則遞歸調用walk，保證每一個屬性均可以被defineReactive
      if (typeof obj[key] === 'object') {
        this.walk(obj[key])
      }
      defineReactive(obj, key, obj[key])
    })
  }
}

function defineReactive(obj, key, value) {
  let dep = new Dep()
  Object.defineProperty(obj, key, {
    get: () => {
      if (Dep.target) {
        // 依賴收集
        dep.add()
      }
      return value
    },
    set: (newValue) => {
      value = newValue
      // 通知更新，對應的更新視圖
      dep.notify()
    }
  })
}

export function observer(value) {
  return new Observer(value)
}
複製代碼

再接着，咱們須要定義Dep和Watcher:

export class Dep {
  constructor () {
    this.deppend = []
  }
  add () {
    // 收集watcher
    this.deppend.push(Dep.target)
  }
  notify () {
    this.deppend.forEach((target) => {
      // 調用watcher的更新函數
      target.update()
    })
  }
}

Dep.target = null

export function setTarget (target) {
  Dep.target = target
}

export function cleanTarget() {
  Dep.target = null
}

// Watcher
export class Watcher {
  constructor (vm, expression, callback) {
    this.vm = vm
    this.callbacks = []
    this.expression = expression
    this.callbacks.push(callback)
    this.value = this.getVal()

  }
  getVal () {
    setTarget(this)
    // 觸發 get 方法，完成對 watcher 的收集
    let val = this.vm
    this.expression.split('.').forEach((key) => {
      val = val[key]
    })
    cleanTarget()
    return val
  }

  // 更新動做
  update () {
    this.callbacks.forEach((cb) => {
      cb()
    })
  }
}
複製代碼

到這裏咱們實現了一個簡單的訂閱-發佈器，因此咱們須要對current.route作數據劫持。一旦current.route更新，咱們能夠及時的更新當前頁面：

// 響應式數據劫持
  observer(this.current)

  // 對 current.route 對象進行依賴收集，變化時經過 render 來更新
  new Watcher(this.current, 'route', this.render.bind(this))
複製代碼

恩....到這裏，咱們彷佛已經完成了一個簡單的響應式數據更新。其實render也就是動態的爲頁面指定區域渲染對應內容，這裏只作一個簡化版的render:

render() {
    let i
    if ((i = this.history.current) && (i = i.route) && (i = i.component)) {
      document.getElementById(this.container).innerHTML = i
    }
  }
複製代碼

hash 和 history

接下來是hash和history模式的實現，這裏咱們能夠沿用vue-router的思想，創建不一樣的處理模型即可。來看一下我實現的核心代碼：

this.history = this.mode === 'history' ? new HTML5History(this) : new HashHistory(this)
複製代碼

當頁面變化時，咱們只須要監聽hashchange和popstate事件，作路由轉換transitionTo:

/** * 路由轉換 * @param target 目標路徑 * @param cb 成功後的回調 */
  transitionTo(target, cb) {
    // 經過對比傳入的 routes 獲取匹配到的 targetRoute 對象
    const targetRoute = match(target, this.router.routes)
    this.confirmTransition(targetRoute, () => {
      // 這裏會觸發視圖更新
      this.current.route = targetRoute
      this.current.name = targetRoute.name
      this.current.path = targetRoute.path
      this.current.query = targetRoute.query || getQuery()
      this.current.fullPath = getFullPath(this.current)
      cb && cb()
    })
  }

  /** * 確認跳轉 * @param route * @param cb */
  confirmTransition (route, cb) {
    // 鉤子函數執行隊列
    let queue = [].concat(
      this.router.beforeEach,
      this.current.route.beforeLeave,
      route.beforeEnter,
      route.afterEnter
    )
    
    // 經過 step 調度執行
    let i = -1
    const step = () => {
      i ++
      if (i > queue.length) {
        cb()
      } else if (queue[i]) {
        queue[i](step)
      } else {
        step()
      }

    }
    step(i)
  }
}
複製代碼

這樣咱們一方面經過this.current.route = targetRoute達到了對以前劫持數據的更新，來達到視圖更新。另外一方面咱們又經過任務隊列的調度，實現了基本的鉤子函數beforeEach、beforeLeave、beforeEnter、afterEnter。 到這裏其實也就差很少了，接下來咱們順帶着實現幾個API吧：

/** * 跳轉，添加歷史記錄 * @param location * @example this.push({name: 'home'}) * @example this.push('/') */
  push (location) {
    const targetRoute = match(location, this.router.routes)

    this.transitionTo(targetRoute, () => {
      changeUrl(this.router.base, this.current.fullPath)
    })
  }

  /** * 跳轉，添加歷史記錄 * @param location * @example this.replaceState({name: 'home'}) * @example this.replaceState('/') */
  replaceState(location) {
    const targetRoute = match(location, this.router.routes)

    this.transitionTo(targetRoute, () => {
      changeUrl(this.router.base, this.current.fullPath, true)
    })
  }

  go (n) {
    window.history.go(n)
  }

  function changeUrl(path, replace) {
    const href = window.location.href
    const i = href.indexOf('#')
    const base = i >= 0 ? href.slice(0, i) : href
    if (replace) {
      window.history.replaceState({}, '', `${base}#/${path}`)
    } else {
      window.history.pushState({}, '', `${base}#/${path}`)
    }
  }
複製代碼

到這裏也就基本上結束了。源碼地址：

動手擼一個 router

有興趣能夠本身玩玩。實現的比較粗陋，若有疑問，歡迎指點。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程