摘要：源碼解讀閱讀請關(guān)注下代碼注釋打個(gè)廣告哪位大佬教我下怎么排版啊，不會弄菜單二級導(dǎo)航撲通是什么首先，你會從源碼里面引入，然后再傳入?yún)?shù)實(shí)例化一個(gè)路由對象源碼基礎(chǔ)類源碼不選擇模式會默認(rèn)使用模式非瀏覽器環(huán)境默認(rèn)環(huán)境根據(jù)參數(shù)選擇三種模式的一種根據(jù)版

閱讀請關(guān)注下代碼注釋

打個(gè)廣告：哪位大佬教我下sf怎么排版啊，不會弄菜單二級導(dǎo)航（撲通.gif）

1. router是什么

首先，你會從源碼里面引入Router，然后再傳入?yún)?shù)實(shí)例化一個(gè)路由對象

// router/index.js
import Router from "vue-router"
new Router({...})
...

源碼基礎(chǔ)類：

// 源碼index.js
export default class VueRouter {
  ...
  constructor (options: RouterOptions = {}) {
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    this.matcher = createMatcher(options.routes || [], this)

    let mode = options.mode || "hash"   // 不選擇模式會默認(rèn)使用hash模式
    this.fallback = mode === "history" && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = "hash"
    }
    if (!inBrowser) {         // 非瀏覽器環(huán)境默認(rèn)nodejs環(huán)境
      mode = "abstract"
    }
    this.mode = mode

    switch (mode) { // 根據(jù)參數(shù)選擇三種模式的一種
      case "history":
        this.history = new HTML5History(this, options.base) // 根據(jù)HTML5版History的方法和屬性實(shí)現(xiàn)的模式
        break
      case "hash":
        this.history = new HashHistory(this, options.base, this.fallback) // 利用url中的hash特性實(shí)現(xiàn)
        break
      case "abstract":
        this.history = new AbstractHistory(this, options.base) // 這種模式原理暫不清楚
        break
      default:
        if (process.env.NODE_ENV !== "production") {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }
  ...
  // 一些api方法，你應(yīng)該很熟悉，$router.push(...)
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    this.history.push(location, onComplete, onAbort)
  }

  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    this.history.replace(location, onComplete, onAbort)
  }

  go (n: number) {
    this.history.go(n)
  }

  back () {
    this.go(-1)
  }

  forward () {
    this.go(1)
  }
  ...
}

我們創(chuàng)建的路由都是VueRouter類的實(shí)例化，用來管理我們的【key-components-view】，一個(gè)key（代碼中的path）對應(yīng)一個(gè)組件，view也就是在template里面占個(gè)坑，用來根據(jù)key展示對應(yīng)的組件,實(shí)例上的func讓我們可以控制路由，也就是官網(wǎng)的api
說簡單點(diǎn)，路由就是一個(gè)‘輪播圖’，emmmmmm，說輪播好像也不過分哈，寫個(gè)循環(huán)切換key的func就是‘輪播了’，而key就是輪播的index，手動滑稽。那么，vue-router是如何實(shí)現(xiàn)不發(fā)送請求就更新視圖的呢，讓我們來看看vue如何使用路由的
實(shí)例化后的路由輸出：區(qū)分下route和router

2. router工作原理
如果你要使用到router，你會在實(shí)例化Vue的參數(shù)options中加入router

// main.js
improt xxx from xxx
import router from xxx
new Vue({
  el: "#app",
  router: router,
  components: { App },
  template: ""
})

那，Vue是如何使用這個(gè)參數(shù)呢，vue-router是作為插件加入使用的，通過mixin（混合）來影響每一個(gè)Vue實(shí)例化，在beforeCreate 鉤子的時(shí)候就會完成router的初始化，從參數(shù)獲取router -> 調(diào)用init初始化 -> 加入響應(yīng)式（defineReactive方法在vue源碼用的很多，也是底層實(shí)現(xiàn)響應(yīng)式的核心方法）

// 源碼install.js
Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router   // 獲取options里面的router配置
        this._router.init(this)               // 初始化，這個(gè)init是VueRouter類里面的方法，實(shí)例化后會繼承這個(gè)方法，方法代碼見下方 
        Vue.util.defineReactive(this, "_route", this._router.history.current) // 這個(gè)是把_route加入數(shù)據(jù)監(jiān)控，所以你可以watch到_route
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

初始化會做些什么：
-判斷主程序狀態(tài)（已經(jīng)初始化了的vue實(shí)例不會再重新初始化路由，也就是你不能手動去再init一次）
-把實(shí)例加入內(nèi)置數(shù)組
-判斷history的類型，做一些類似優(yōu)化的事，比如hash模式的setupListeners方法，就是延遲監(jiān)聽hashChange事件，等到vue完成掛載再監(jiān)聽，太細(xì)節(jié)不用深入
-listen定義一個(gè)callback，listen是定義在最底層History類上的，作用就是定義一個(gè)callback，listen會在需要的時(shí)候被調(diào)用，在路由發(fā)生變化的時(shí)候會執(zhí)行這個(gè)callback

// 源碼index.js
export default class VueRouter {
...
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)   // 這個(gè)apps存儲了讓所有的Vue實(shí)例化（根組件），后面遍歷的時(shí)候，會把當(dāng)前標(biāo)記route掛到所有根組件的，也就是 vm._route 也是 vm._router.history.current

    // main app already initialized.
    if (this.app) {
      return
    }

    this.app = app

    const history = this.history

    if (history instanceof HTML5History) {
      history.transitionTo(history.getCurrentLocation())
    } else if (history instanceof HashHistory) {
      const setupHashListener = () => {
        history.setupListeners()
      }
      history.transitionTo(
        history.getCurrentLocation(),
        setupHashListener,
        setupHashListener
      )
    }

    history.listen(route => {               // 注意這個(gè)listen會在后面用到
      this.apps.forEach((app) => {
        app._route = route                  // 根組件全部獲取當(dāng)前route
      })
    })
  }
...
}

關(guān)于route的變化過程會在下面具體模式中說明，這里先跳過，接下來先說vue拿到router后，怎么使用router來渲染組件的

3. vue如何使用router的

在安裝vue-router插件的時(shí)候

export function install (Vue) {
  ...
  Vue.component("RouterView", View)  //  &  你應(yīng)該很熟悉，本質(zhì)就是vue組件，看源碼之前我的猜測也是組件
  Vue.component("RouterLink", Link)
  ...
}

router-link你不一定會使用，但是router-view你肯定會使用，它就是作為"窗口"的存在，來渲染你需要展示的組件。
那，從這個(gè)組件開始說，一個(gè)前提條件是：vnode是通過render來創(chuàng)建的，也就是說改變_route的值會執(zhí)行render函數(shù)，Router-View這個(gè)組件定義了自己的render，省略了大部分代碼，這兩行夠了，你最終通過看到的視圖就是這么來的

// vue源碼render.js
export function renderMixin (Vue: Class) {
...
vnode = render.call(vm._renderProxy, vm.$createElement)
...
}
// router源碼 view.js
render (_, { props, children, parent, data }) {
...
const h = parent.$createElement
...
return h(component, data, children)
}

流程

$router.push() --> HashHistory.push() --> History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

1. 關(guān)于hash
url中#號后面的參數(shù)，別名哈希值，關(guān)于hash的一些特性

1.改變hash并不會引起頁面重載
2.HTTP請求不包括#，所以使用hash不會影響到其他功能
3.改變#會改變?yōu)g覽器的訪問歷史
4.window.location.hash可以讀取哈希值
5.JavaScript可以通過onhashchange監(jiān)聽到hash值的變化，這就意味著可以知道用戶在瀏覽器手動改變了hash值

因?yàn)檫@些特性才有的hashHistory
更多關(guān)于hash知識見 URL的井號 - 阮一峰的網(wǎng)絡(luò)日志

2. hashHistory源碼
首先，這三種模式都是通過繼承一個(gè)基礎(chǔ)類History來的

export class HashHistory extends History {
...
}

那，三種模式肯定有相同的屬性，相同的方法，肯定不會去創(chuàng)建三次所以從一個(gè)基類繼承，然后各自的部分屬性or方法會有差異，至于History這個(gè)類，我是不會去細(xì)看的，反正我也看不懂，哈哈哈哈

router上的實(shí)例屬性、方法可以在VueRouter、HashHistory/HTML5History/AbstractHistory、History上找到，這里說下HashHistory的幾個(gè)func的實(shí)現(xiàn)、

// router源碼hash.js
export class HTML5History extends History {
...
go (n: number) {
    window.history.go(n)
  }
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {  // History類上的func
      pushHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

function pushHash (path) {
  if (supportsPushState) { // 是否瀏覽器環(huán)境且環(huán)境支持pushstat方法，這個(gè)func下面會說
    pushState(getUrl(path)) // 支持的話往window.history添加一條數(shù)據(jù)
  } else {
    window.location.hash = path // 不支持的話直接修改location的hash
  }
}

  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      replaceHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }
// 其實(shí)replace和push只有兩個(gè)區(qū)別
1.
window.location.hash = path
window.location.replace(getUrl(path))
2.
if (replace) { // replace調(diào)這個(gè)func會傳一個(gè)true
  history.replaceState({ key: _key }, "", url)
} else {
  _key = genKey()
  history.pushState({ key: _key }, "", url)
}
...
}

還有一點(diǎn)就是，在初始化hash模式路由的時(shí)候，會執(zhí)行一個(gè)func,監(jiān)聽hashchange事件

setupListeners () {
    window.addEventListener(supportsPushState ? "popstate" : "hashchange", () => {
      const current = this.current
      if (!ensureSlash()) {
        return
      }
      this.transitionTo(getHash(), route => {
        if (supportsScroll) {
          handleScroll(this.router, route, current, true)
        }
        if (!supportsPushState) {
          replaceHash(route.fullPath)
        }
      })
    })
}

HTML5--History 科普

主要是新增的兩個(gè)api

1.History.pushState()

[優(yōu)點(diǎn)寫的清清楚楚]

HTML5History的push、replace跟hash模式的差不多，就不上代碼了
一個(gè)標(biāo)記是否支持HTML5的flag，這么寫的，有需要的可以刨回去用

export const supportsPushState = inBrowser && (function () {
  const ua = window.navigator.userAgent

  if (
    (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
    ua.indexOf("Mobile Safari") !== -1 &&
    ua.indexOf("Chrome") === -1 &&
    ua.indexOf("Windows Phone") === -1
  ) {
    return false
  }

  return window.history && "pushState" in window.history
})()

還有一個(gè)就是scrollBehavior，用來記錄路由跳轉(zhuǎn)的時(shí)候滾動條的位置，這個(gè)只能在HTML5模式下使用，即支持pushState方法的時(shí)候，部分博客說只有在HTML5History下才能使用，這個(gè)等我明天驗(yàn)證一下，我個(gè)人覺得支持HTML5就可以了

2.History.replaceState()

說的也很直觀，就是不創(chuàng)新新紀(jì)錄而覆蓋一條記錄，just do it

別問第三種情況（我是誰、我在哪、誰打我）

我兜子好沃，早知道不做前端了~

在學(xué)習(xí)router源碼的時(shí)候閱讀了熵與單子的代碼本的文章，看完這篇文章配合源碼基本都可以很好掌握vue-router的大概，感謝作者，另外說明下本文由本人學(xué)習(xí)結(jié)束后加上自己的理解一字一字敲出來的，可能有些相似之處，侵刪請聯(lián)系我，寫文章的目的是看看自己能否表述清楚，對知識點(diǎn)的掌握情況，講的不對的地方，請各位大佬指正~

~感謝潘童鞋的指導(dǎo)(^▽^)

當(dāng)然，我也稀罕你的小??，點(diǎn)個(gè)贊再走咯~

以上圖片均來自MDN網(wǎng)頁截圖、vue官網(wǎng)截圖、百度首頁截圖，不存在版權(quán)問題 /滑稽

【注】：內(nèi)容有不當(dāng)或者錯(cuò)誤處請指正~轉(zhuǎn)載請注明出處~謝謝合作！