Vue-Router深入源碼分析：index.js

前言

雖然最近需求着實不少，但是感覺自己學習勁頭還是蠻足的，並沒有被需求壓垮。今天，帶來Vue-Router源碼解析系列的第二篇文章：index.js。

正文

vue-router類裏面都做了什麼？

index.js是vue-router這個類的主構造函數，所以內容上算是比較關鍵的：

從圖片中我們可以看出來，這是一個ES6聲明類的方法，vue-router源碼中類的聲明都是使用類ES的語法，constructor (options: RouterOptions = {})，在vue-router中使用了flow.js做了類型的檢查，

什麼是flow.js？flow.js怎麼使用呢？因爲篇幅原因，這裏就暫時先不做涉及。各位小夥伴，可以參看官網：https://flow.org/en/docs/types/

解析：constructor

首先我們來看一下constructor內的代碼，

constructor (options: RouterOptions = {}) {
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    this.matcher = createMatcher(options.routes || [], this)
    //默認爲hash錨點
    let mode = options.mode || 'hash'
      //當然使用的是history模式 h5的pushState的方式來實現路由跳轉的，對options設置fallback屬性爲true時會回退到hash模式
      // 是否支持回退
    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract'
    }
    //沒有fallback的話選擇錨點模式,node環境選擇abstract模式
    this.mode = mode

    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }

我們聲明一個vue-router實例的時候是怎麼做的？

let router = new Router({
    base : '/',
    mode : 'history',
    routes : [{
        component : xxx,
        path : xxx
    },xxx]
})

constructor (options: RouterOptions = {}) 
options就是我們剛纔上面的一個對象，裏面有base、mode、routes等屬性

這時候我們知道options是個什麼東西了，我們來看看內部對options進行了哪些處理。

首先我們說一下vue-router最核心的內容之一：

解析：mode

我們知到vue-router的路由有兩種方式，一種是#錨點性的，第二種是和正常路徑一樣的，可是vue構建的應用是一個但頁面應用如何讓他像正常的多頁面應用一樣，是在不停的改變路徑呢？
這裏面就使用了html5的history的pushState與replaceState（讓頁面看起來無刷新的改變路徑），具體內容大家可以看一下官網文檔和大神張鑫旭的博客（https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/）

在vue-router源碼中有一個工具類專門做了這個事情：

我們來看一下vue-router是如何匹配mode的吧：

// vue-router默認使用hash模式
let mode = options.mode || 'hash';
this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
// 如果選擇了history但是pushState方法並不能使用並且設置了
// 在當瀏覽器不支持 history.pushState 控制路由是否應該回退到 hash 模式的情況下。
// （options.fallback默認就是true）
// 如果發現需要回退了，就回到hash錨點模式
    if (this.fallback) {
      mode = 'hash'
    }
// 不在瀏覽器環境就選擇abstract模式（在node環境）
    if (!inBrowser) {
      mode = 'abstract'
    }
    this.mode = mode
// 根據三種情況是成不同的路由轉換實例。
// 如果沒有mode不是這三種情況就報錯。
// HTML5History、HTML5History、HTML5History三個類都是繼承與一個base類
// 裏面有這三種模式對於路徑轉換時做的事情進行了一定的封裝。
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HTML5History(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new HTML5History(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }

到這裏大家應該對我們寫的mode模式有一點的瞭解了吧。

解析：init

下面說一下init方法，上一章我們講了在根節點的beforeCreate生命週期鉤子中，使用了init方法，如果忘記了可以翻看上一篇install方法的學習來回歸一下

所以app就是根組件，init在執行前要判斷一下，vue-router是不是被vue成功use了，因爲成功use之後，會把install方法的installed屬性設置爲true：

init (app: any /* Vue component instance */) {
    process.env.NODE_ENV !== 'production' && assert(
      install.installed,
      `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
      `before creating root instance.`
    )
    this.apps.push(app)
    // main app already initialized. (根組件已經被初始化)
    if (this.app) {
      return
    }

    this.app = app

    const history = this.history
    // 當我們的根組件完成了對vue-router的init的時候我們就要完成第一次路由的跳轉了
    // 當我們的項目啓動的時候肯定會有一個路徑，這個路徑是什麼不重要
    // 我們在第一次進入這個路徑的時候，會進行vue-router的初始化
    // 初始化之後要開始展示對應的組件，可是我們vue-router那些popState的事件肯定沒有綁定，不會觸發啊，
    // 怎麼辦？？ 那就手動觸發一下這個事情，
    // 第一次進入肯定沒有對應的事件，不會完成跳轉時該做的事情。
    if (history instanceof HTML5History) {
      history.transitionTo(history.getCurrentLocation())
    } else if (history instanceof HashHistory) {
      const setupHashListener = () => {
        history.setupListeners()
      }
      history.transitionTo(
        history.getCurrentLocation(),
        setupHashListener,
        setupHashListener
      )
    }
    // 針對設置的不同mode（模式）
    // 將mode的時候，每種模式的history實例來源於三個不同的類，所以instanceof足夠判斷是哪種模式。

到現在，我們上一章的init函數已經串聯起來了，不知道大家感覺怎麼樣？我感覺舒服了很多了。

路由守衛

用過vue-router的同學們都知道路由守衛的概念，這是在路由跳轉的前後等三個地方設置了不同的鉤子，幫助我們在進入離開路由前做一些事情。這個鉤子是怎麼做的呢？

聲明瞭三個數組，存放每個週期內的鉤子上綁定的函數。

vue-router全局級別的beforeEach、beforeResolve、afterEach做了什麼？

就這麼兩行代碼你敢信？？我也很糾結你就幹了這麼點事情。
執行一下registerHook函數，從字面意思一看就是註冊鉤子，

怎麼註冊的呢？

function registerHook (list: Array<any>, fn: Function): Function {
  list.push(fn)
  // 返回值是一個function
  return () => {
    const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}

接收一個生命週期的鉤子數組，將我們要執行的函數傳到數組內就可以完成註冊了，我還沒看到這三個數組的內容，但是直覺告訴我很有可能就是，觀察者模式（以後就探索去）。註冊到這應該就OK了，

爲什麼還有個返回值呢？
返回值的內容一看就是要清楚鉤子內的函數呀，我們調用這個registerHook函數後，可以得到註冊函數的清除函數，清除的是鉤子數組中對應的函數，還有這麼一手，牛的一匹。（讓代碼教你如何熟練使用閉包～）

vue-router的編程式導航是怎麼做的？

push方法與replace、go方法調用對應路由轉換實例的對應方法，因爲不同模式大家方法肯定都不一樣，
back與forward都是go方法傳入特殊參數，所以看到這裏我們發現history這個實例的內容很關鍵。

---

清一清嗓

到了這裏我們vue-router的主線流程我們已經進行了一個梳理，不知道大家對這一塊內容感覺滿意嗎？ 不滿意就請不要郵寄刀片哈。

所以到現在我們簡單進行一下總結

1：mode是設置模式的，有hash、history、abstract三種模式、每個模式會導致vue-router實例的history不同，來自三個不同的類、每個類又繼承於總的base類。
2:init方法會初始化整個組件、並且在vue-router的實例中設置了app屬性存放根組件（這個確實很有用）、手動的完成初始化後的第一次路由跳轉。
3:beforeEach、beforeREsolve、afterEach三個全局的鉤子都有對應的鉤子函數數組，存放每個週期鉤子內要做的事情、使用registerHook方法來完成鉤子函數的註冊，registerHook也可以清除鉤子內對應的函數。
4:push、replace、go等方法都是使用history方法內的對應方法。

總結完畢 我們學到了什麼？ history真重要，我要好好看看他內部的實現

真的沒出息的總結。

vue-router類中還有一部分對options.routes的處理

options.routes 就是 [{path : 'xxx',components : 'xxx'}] 這個數組

生成一個根據options.routes的一份比對程序，完成程序的比對。

下一期的內容要在繼續學習index.js和開荒history中進行一個抉擇，具體是什麼內容大家可以積極留言，給個方向呀。

結束語

每一個前端er（boy and girl） 你們都不是一個人在戰鬥。

安排！！！！