V2AS问路
Vue Router 源码分析💪
阅读原文时间：2023年08月25日阅读：1

专栏分享：vue2源码专栏，玩具项目专栏，硬核 推荐

欢迎各位 ITer 关注点赞收藏

本篇文章参考版本：vue-router v3.x

最终成果，实现了一个可运行的核心路由工程：柏成/vue-router3.x

目录结构如下：

.
|-- components           // 组件(view/link)
|   |-- router-link.js
|   `-- router-view.js
|-- create-matcher.js    // Route 匹配
|-- create-route-map.js  // Route 映射表
|-- history              // Router 处理 (hash模式、history模式)
|   |-- base.js
|   |-- hash.js
|   `-- html5.js
|-- index.js             // Router 类
`-- install.js           // Router 插件安装

1. 路由注册

我们先来看一个基本例子，熟悉其简单的应用配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义 (路由) 组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 routes 配置
const router = new VueRouter({
  mode: 'history',
  routes
})

// 4. 创建和挂载根实例，记得注入路由器，从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由（后面我们会详细介绍其内部实现）

我们发现，如果要在一个模块化工程中使用 vue-router，必须要通过 Vue.use() 明确地安装路由功能

Vue.use(plugin) 是一个全局插件注册API，官方是这样介绍的：

安装 Vue.js 插件时调用，如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它本身会被作为 install 方法。install 方法调用时，会将 Vue 对象作为第一个参数传入

将 Vue 对象当做参数的好处就是插件的编写方不需要额外 import Vue 了，可减少插件包的体积

vue-router 的入口文件是 src/index.js，其中定义了 VueRouter 类；也实现了 install 的静态方法，它的定义在 src/install.js 中

Vue.use(VueRouter) 默认会调用 VueRouter 类上的 install 方法

src/index.js:

import install from './install'
export default class VueRouter{ }
VueRouter.install = install

src/install.js:

import routerLink from './components/router-link'
import routerView from './components/router-view'

// 静态全局变量
export let Vue

function install (_Vue) {
  Vue = _Vue

  // mixin 内部会调用 mergeOptions方法， 所有组件初始化都会调用这个方法
  // 这里不能直接将属性定义在原型上, 只有在 new Vue 中传入了 router路由实例 才能被后代组件共享
  Vue.mixin({
    beforeCreate () {
      // 组件渲染是从父到子的
      // 这样保证了有 router路由实例才加，没有 router路由实例就不加
      if (this.$options.router) {
        this._routerRoot = this // 根实例
        this._router = this.$options.router // router路由实例

        this._router.init(this) // this 就是我们的根应用 new Vue()

        // 给根实例添加一个属性 _route，值就是当前的 current对象，并将 this._route变成了响应式对象（数据变化应该会引起页面重新渲染）
        // 注意！！！current 改变并不会触发 _route的改变，我们需要在 current变化时手动更新 this._route的值
        // let current = {}; let _route = current; current = {name: '新的'}; _route 仍然是 {}
        Vue.util.defineReactive(this, '_route', this._router.history.current)

        // this._router 可以拿到路由实例
        // this._route 可以拿到current对象
      } else {
        // 在所有后代组件上都增加 _routerRoot，其指向根实例
        this._routerRoot = this.$parent && this.$parent._routerRoot
      }
    }
  })

  // 代理实例上的 $router 属性，this.$router
  Object.defineProperty(Vue.prototype, '$router', {
    get () {
      return this._routerRoot && this._routerRoot._router
    }
  })
  // 代理实例上的 $route 属性，this.$route
  Object.defineProperty(Vue.prototype, '$route', {
    get () {
      return this._routerRoot && this._routerRoot._route
    }
  })

  // 注册 router-link 全局组件
  Vue.component('router-link', routerLink)
  // 注册 router-view 全局组件
  Vue.component('router-view', routerView)
}
export default install

在 install 方法中，我们主要做了 3 件事 ！

  1. 我们利用 Vue.mixin 将 beforeCreate 生命周期钩子注入到了每一个组件中，并在组件自身钩子之前调用

    在 beforeCreate 钩子中，我们将根实例 _routerRoot 共享给了所有的后代组件；给根实例添加了一个 _router 属性（VueRouter实例）并调用了 router 的初始化方法 this._router.init()；然后用 defineReactive 方法给根实例添加了一个响应式属性 _route（当前路由对象）

  2. 在 Vue 原型上代理了 $router、$route 属性，这就是为什么我们可以在任何组件内通过 this.$router 访问路由器、通过 this.$route 访问当前路由

  3. 通过 Vue.component 注册了全局组件 <router-link>、<router-view>

下一节我们将分析一下 VueRouter 对象的实现和它的初始化工作

2. VueRouter 类

VueRouter 的实现是一个类，在入口文件 src/index.js中定义

import install from './install'
import createMatcher from './create-matcher'
import HashHistory from './history/hash'
import Html5History from './history/html5'

class VueRouter {
  constructor (options) {
    // 用户传递的路由配置
    const routes = options.routes || []
    this.beforeEachHooks = []

    // 路由匹配器，可以匹配也可以添加新的路由
    this.matcher = createMatcher(routes)

    const mode = options.mode || 'hash'
    if (mode === 'hash') {
      this.history = new HashHistory(this) // popstate, hashchange
    } else if (mode === 'history') {
      this.history = new Html5History(this) // popstate
    }
  }

  // 路由守卫，缓存回调钩子，在 transitionTo方法中执行回调钩子
  beforeEach (cb) {
    this.beforeEachHooks.push(cb)
  }

  // router初始化方法（只会在 根vue实例中的 beforeCreate钩子中调用一次）
  init (app) {
    console.log('router初始化方法（init）')
    const history = this.history
    // 手动根据当前路径去匹配对应的组件，渲染，之后监听路由变化
    history.transitionTo(history.getCurrentLocation(), () => {
      history.setupListener()
    })

    // 在 transitionTo 方法中执行这个回调，目的就是在 current变化时手动更新 app._route的值，数据变化会自动重新渲染视图
    history.listen((newRoute) => {
      app._route = newRoute
    })
  }

  // 简化用户调用层级  this.match ≈ this.matcher.match
  match (location) {
    return this.matcher.match(location)
  }

  // 调用 HashHistory or Html5History 的跳转逻辑（点击router-link触发）
  push (location) {
    // 针对hash模式： window.location.hash
    // 针对history模式： history.pushState
    return this.history.push(location)
  }
}

// 当执行 Vue.use(VueRouter) 时，如果 VueRouter插件是一个对象，必须提供 install方法，install方法调用时，会将 Vue作为参数传入
VueRouter.install = install

export default VueRouter

我们先来分析一下 constructor构造函数，看看当我们 new VueRouter({}) 时执行了哪些操作

在构造函数中，我们定义了一些私有属性。 this.beforeEachHooks 属性用来记录路由守卫钩子回调（最终在 transitionTo 方法中执行回调，后面会详细介绍）；this.matcher 属性代表路由匹配器对象，createMatcher() 方法返回了 match、addRoute、addRoutes 等方法，可以匹配、添加新的路由（我们会在 transitionTo 方法中应用 match，后面会详细介绍）；this.history 属性代表路由历史实例，是具体执行各种路由操作的执行者，其根据选项模式 options.mode 的不同，去 new 了一个相对应的 History 实例 HashHistory or Html5History（后面会详细介绍）

tip：transitionTo 方法的实现是在 src/history/base.js 中。他负责处理所有的跳转逻辑，会根据路径匹配对应的路由记录，更新 app._route（响应式对象）为最新的路由对象，从而触发 setter 劫持，通知 <router-view> 去渲染新的组件（先有个大概认知，后面会详细介绍）

触发时机：还记得吗？在前面 VueRouter.install 方法中，我们利用 Vue.mixin 将 beforeCreate 生命周期钩子注入到了每一个组件中。我们在 new Vue({}) 根实例时，会把 router 路由器注入到根实例，所以我们只会在根vue实例中的 beforeCreate 钩子中调用一次router.init方法

src/install.js:

beforeCreate () {
  if (this.$options.router) {
    this._routerRoot = this // 根实例
    this._router = this.$options.router // router路由实例

    this._router.init(this) // this 就是我们的根应用 new Vue()

    Vue.util.defineReactive(this, '_route', this._router.history.current)
  } else {
    this._routerRoot = this.$parent && this.$parent._routerRoot
  }
}

我们在 router 初始化方法中主要做了两件事！

  1. 执行 history.transitionTo 方法，根据当前路径去匹配对应的组件，并渲染。然后通过 history.setupListener 在回调中添加路由监听器，当路由变化时，我们就可以做一些事情了！当然，不同的路由模式有不同的 setupListener 实现（后面会详细介绍）

    history.transitionTo(history.getCurrentLocation(), () => {
    history.setupListener()
    })

  2. 执行 history.listen 方法，缓存更新 app._route 的回调。后续我们会在 transitionTo 方法中执行这个回调，目的就是在 current 对象变化时手动更新一下 app._route 的值。

    history.listen((newRoute) => {
    app._route = newRoute
    })

我们之前用 defineReactive 方法将根实例上的 _route 属性变成了一个响应式对象，其数据变化后，会触发 setter 劫持，通知 <router-view> 去自动渲染新的组件

tip：为什么要手动更新 app._route 的值呢？因为 current 改变并不会触发 _route 的改变，所以我们需要在 current 变化时手动更新一下 _route 的值，看个小例子就明白了

// Vue.util.defineReactive(this, '_route', this._router.history.current)

let current = {}; let _route = current; current = {name: '新值'}; // _route 仍然是 {}

当我们通过 <router-link> 跳转路由时会触发此方法，内部调用了 history 对象（路由历史实例）的 push 方法，不同的 mode 选项有不同的实现方式

hash模式下，我们通过 transitionTo 方法匹配渲染新的组件，然后通过 history.pushState/location.hash （优雅降级处理）往路由栈中添加一条路由记录（transitionTo 方法后面会详细介绍）

HashHistory 类在 src/history/hash.js中实现

const supportsPushState = window.history && typeof window.history.pushState === 'function'

class HashHistory extends Base {
  push (location) {
    this.transitionTo(location, () => {
      if (supportsPushState) {
        window.history.pushState({}, '', getUrl(location))
      } else {
        window.location.hash = location
      }
    })
  }
}

history模式下，我们也是通过 transitionTo 方法匹配渲染新的组件，然后通过 history.pushState 往路由栈中添加一条路由记录

Html5History 类在 src/history/html5.js中实现

class HTML5History extends Base {
  push (location) {
    this.transitionTo(location, () => {
      window.history.pushState({}, '', location)
    })
  }
}

下一节我们将分析一下 matcher 路由匹配器的实现

3. matcher

createMatcher 方法返回了 match、addRoute、addRoutes 等方法，可以匹配、添加新的路由。他的定义在 src/create-matcher.js 中

其中 match 方法可以根据一个 location 路径，去 createRouteMap 方法返回的 pathMap 路由映射表中匹配到对应的路由信息

 export default function createMatcher (routes) {
  // pathList：收集所有的路由路径，['/', '/a', '/b', '/about', '/about/a', '/about/b']
  // pathMap：收集路径的对应路由记录，['/':{/的记录}, '/a':{/a的记录}, '/b':{/b的记录}, '/about':{/about的记录}, ...]
  const { pathList, pathMap } = createRouteMap(routes)

  // 动态添加多个路由规则 在v4.x中已废弃：使用 router.addRoute() 代替
  function addRoutes (routes) {
    createRouteMap(routes, pathList, pathMap)
  }
  // 动态添加一条新路由规则
  function addRoute (route) {
    createRouteMap([route], pathList, pathMap)
  }
  // 根据一个路径获取对应的路由信息 在v4.x中已废弃：删除 router.match 改为 router.resolve
  function match (location) {
    return pathMap[location]
  }

  return {
    addRoutes,
    addRoute,
    match
  }
}

createMatcher 触发时机：VueRouter 类的 constructor 构造函数中，我们定义了一些私有属性，其中就包括this.matcher 路由匹配器对象。VueRouter 类在 src/index.js 中实现

class VueRouter {
  constructor (options) {
    // 用户传递的路由配置
    const routes = options.routes || []
    this.matcher = createMatcher(routes)
      ...
  }

  // 简化用户调用层级  this.match ≈ this.matcher.match
  match (location) {
    return this.matcher.match(location)
  }
}

match 应用时机：我们会在 transitionTo 方法中运行 match 方法，用以匹配对应的路由信息。然后更新 app._route（响应式对象）为最新的路由对象，从而触发 setter 劫持，通知 <router-view> 去渲染新的组件

createMatcher 创建路由匹配器时，会用到 createRouteMap 方法去创建路由映射关系，它的定义在 src/create-route-map.js 中

该方法根据用户传入的 routes选项，返回了 pathList（收集所有的路由路径） 和 pathMap（收集路径的对应路由记录，这就是我们的路由映射表） 2个对象

 // @return pathList：收集所有的路由路径，['/', '/a', '/b', '/about', '/about/a', '/about/b']
 // @return pathMap：收集路径的对应路由记录，['/':{/的记录}, '/a':{/a的记录}, '/b':{/b的记录}, '/about':{/about的记录}, ...]
export default function createRouteMap (routes, pathList, pathMap) {
  // 当第一次加载的时候没有 pathList 和 pathMap
  pathList = pathList || []
  pathMap = pathMap || {}
  routes.forEach(route => {
    addRouteRecord(route, pathList, pathMap)
  })

  return {
    pathMap
  }
}

// 添加路由信息
function addRouteRecord (route, pathList, pathMap, parentRecord) {
  const path = parentRecord ? `${parentRecord.path}${parentRecord.path.endsWith('/') ? '' : '/'}${route.path}` : route.path
  const record = {
    path,
    component: route.component,
    props: route.props,
    meta: route.meta,
    parent: parentRecord
  }

  // 维护路径对应的属性
  if (!pathMap[path]) {
    pathList.push(path)
    pathMap[path] = record
  }

  route.children && route.children.forEach(childRoute => {
    addRouteRecord(childRoute, pathList, pathMap, record)
  })
}

下一节我们将分析一下 HashHistory（hash模式）、HTML5History（history模式）对象的实现

4. 路由模式

HashHistory 和 Html5History 的实现是两个类，他们均继承自 base 基类，由于 base 基类中主要是路由跳转相关的逻辑，我们打算在下一章节和路由组件、导航守卫一起分析，它在 src/history/base.js中定义

hash 模式，优先使用 history.pushState/repaceState API 来完成 URL 跳转和 onpopstate 事件监听路由变化，不支持再降级为 location.hash API 和 onhashchange 事件。在src/history/hash.js中定义

import Base from './base'

const supportsPushState = window.history && typeof window.history.pushState === 'function'

class HashHistory extends Base {
  constructor (router) {
    super(router)

    // 初始化 hash路由时，给一个默认的 hash路径 /
    ensureSlash()
  }

  // 获取hash路径片段 http://192.168.21.144/framework-assets#/assets/1522392838?id=1522392838 => '/assets/1522392838?id=1522392838'
  getCurrentLocation () {
    return getHash()
  }

  // 添加监听器，监听hash值的变化（在 vueRouter类的init方法中调用）
  // 当用户在浏览器点击后退、前进，或者在js中调用HTML5 history API【history.back()，history.go()，history.forward()】等，会触发 popstate事件 和 hashchange事件
  // 用户通过 location.hash = 'xxx' 也会触发 popstate事件 和 hashchange事件
  // 但 history.pushState()，history.replaceState（）不会触发这两个事件！！！
  setupListener () {
    const eventType = supportsPushState ? 'popstate' : 'hashchange'
    window.addEventListener(eventType, () => {
      this.transitionTo(getHash()) // 初始化执行的 ensureSlash方法也会触发此回调
    })
  }

  // 跳转页面
  // 为什么要手动执行 transitionTo，而不是直接改变地址，通过路由监听器去间接执行 transitionTo？
  // 因为 window.history.pushState() 不会触发 popstate事件！！！
  push (location) {
    this.transitionTo(location, () => {
      if (supportsPushState) {
        window.history.pushState({}, '', getUrl(location))
      } else {
        window.location.hash = location
      }
    })
  }
}

// http://localhost:8080/  ==>  http://localhost:8080/#/
function ensureSlash () {
  if (window.location.hash) {
    return
  }
  window.location.hash = '/'
}

// 获取当前hash值（去掉 #）
// '#/assets/1522392838?id=1522392838'  ==>  '/assets/1522392838?id=1522392838'
function getHash () {
  return window.location.hash.slice(1)
}

// 绝对路径
function getUrl (path) {
  const href = window.location.href
  const i = href.indexOf('#')
  const base = i >= 0 ? href.slice(0, i) : href
  return `${base}#${path}`
}

export default HashHistory

ensureSlash

当我们实例化一个 history 对象时，会默认在 constructor 构造函数中执行 ensureSlash 方法，如果没有hash 值的话就给一个默认的 hash 路径 /，确保存在 hash 锚点

其作用就是将 http://localhost:8080/ 自动修改为 http://localhost:8080/#/

setupListener

添加路由监听器，当 hash 值变化时调用 transitionTo 方法统一处理跳转逻辑。事件注册采用了降级处理，优先使用 onpopstate 事件，若不支持，则降级使用 onhashchange 事件

当用户点击浏览器的后退、前进按钮，在 js 中调用 HTML5 history API，如 history.back()、history.go()、history.forward()，或者通过 location.hash = 'xxx' 都会触发 popstate 事件 和 hashchange 事件

需要注意的是调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件 和 hashchange 事件

触发时机：在 vueRouter 类的 init 方法中调用

class VueRouter {
  // router初始化方法（只会在 根vue实例中的 beforeCreate钩子中调用一次）
  init (app) {
    const history = this.history
    // 手动根据当前路径去匹配对应的组件，渲染，之后监听路由变化
    history.transitionTo(history.getCurrentLocation(), () => {
      history.setupListener()
    })

    ...
  }
}

push

跳转页面，手动调用 transitionTo 方法去处理跳转逻辑，并在回调中通过 history.pushState 或 location.hash 向路由栈添加一条路由记录，更新地址栏 URL

触发时机：当我们通过 <router-link> 跳转路由时会触发根实例上的 app._router.push() 方法（ VueRouter 类中的 push 方法），其内部就调用了该方法，即 history 对象（路由历史实例）的 push 方法，当然，不同的 mode 选项有不同的实现方式

class VueRouter {
  // 调用 HashHistory or Html5History 的跳转逻辑（点击router-link触发）
  push (location) {
    // 针对hash模式： history.pushState、不支持再降级为 window.location.hash
    // 针对history模式： history.pushState
    return this.history.push(location)
  }
}

为什么要手动执行 transitionTo 方法？而不是通过 history.pushState 或 location.hash 改变路由栈，然后利用 onpopstate 事件 或 onhashchange 事件去间接执行 transitionTo 方法呢

答：因为 history.pushState 不会触发 onpopstate 事件 这里引出了一个问题，如果我们手动执行了 transitionTo 方法，然后在回调中用 location.hash 改变路由栈，就又会通过 onhashchange 事件再次执行 transitionTo 方法，这里重复执行了 2 遍，所以我们要在 transitionTo 内部做去重处理（后面会详细介绍其去重逻辑）

history 模式，使用 history.pushState/repaceState API 来完成 URL 跳转，使用onpopstate 事件监听路由变化。在src/history/html5.js中定义

import Base from './base'

class HTML5History extends Base {
  constructor (router) {
    super(router)
  }

  // 添加监听器，监听pathname变化（在 vueRouter类的init方法中调用）
  // 当用户在浏览器点击后退、前进，或者在js中调用 history.back()，history.go()，history.forward()等，会触发popstate事件
  // 但 pushState、replaceState不会触发这个事件
  setupListener () {
    window.addEventListener('popstate', () => {
      this.transitionTo(window.location.pathname)
    })
  }

  // 获取pathname  http://192.168.21.144/framework-assets#/assets/1522392838?id=1522392838 => '/framework-assets'
  getCurrentLocation () {
    return window.location.pathname
  }

  // 跳转页面
  // 为什么要手动执行 transitionTo，而不是直接改变地址，通过路由监听器去间接执行 transitionTo？
  // 因为 window.history.pushState() 不会触发 popstate事件！！！
  push (location) {
    this.transitionTo(location, () => {
      window.history.pushState({}, '', location)
    })
  }
}

export default HTML5History

setupListener

添加路由监听器，当激活同一文档中不同的历史记录条目时，调用 transitionTo 方法统一处理跳转逻辑。使用了 onpopstate 事件监听路由变化

触发时机：在 vueRouter 类的 init 方法中调用

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件

push

跳转页面，手动调用 transitionTo 方法去处理跳转逻辑，并在回调中通过 history.pushState 向路由栈添加一条路由记录，更新地址栏 URL

触发时机：当我们通过 <router-link> 跳转路由时会触发根实例上的 app._router.push() 方法（ VueRouter 类中的 push 方法），其内部就调用了该方法

下一节我们分析一下路由切换到底做了哪些工作

5. 路由切换

当我们点击<router-link> 进行路由切换时，会通过 push 方法调用 base 基类中的 transitionTo 方法处理跳转逻辑，然后触发一系列的导航守卫钩子，如果全部钩子都执行完了，就会更新根实例上的 _route 响应式属性，通知 <router-view> 去渲染新的组件

ok！我们具体分析下每一步都是如何实现的

<router-link> 全局组件的注册是在 VueRouter 类上的 install 方法中，其组件实现是在 src/components/link.js 中

点击 <router-link> 时，会调用根实例上的 app._router.push() 方法（即 VueRouter 类中的 push 方法），其内部调用了 history 对象（路由历史实例）的 push 方法（即 HashHistory 类或 Html5History 类或中的 push 方法），内部手动调用 transitionTo 方法去处理跳转逻辑，并在回调中通过 history.pushState 或 location.hash 向路由栈添加一条路由记录，更新地址栏 URL

export default {
  props: {
    to: { type: String, required: true },
    tag: { type: String, default: 'a' }
  },
  methods: {
    handler () {
      this.$router.push(this.to)
    }
  },
  render () {
    const tag = this.tag
    return <tag style={ { cursor: 'pointer' } } onClick={this.handler}>{this.$slots.default}</tag>
}
}

接下来我们先看下导航守卫，然后一起分析 base 基类中 transitionTo 方法的内部实现

这里，我们只介绍全局前置守卫 beforeEach。用户可以注册多个全局前置守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // 返回 false 以取消导航
  return false
})

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。守卫方法接收三个参数

  • to: 即将要进入的目标路由
  • from: 当前导航正要离开的路由
  • next： 进行管道中的下一个守卫钩子

我们需要用 beforeEachHooks 数组来收集用户注册的守卫钩子，后续会在 transitionTo 方法中依次执行

class VueRouter {
  constructor (options) {
    this.beforeEachHooks = []
    ...
  }

  // 路由守卫，缓存回调钩子，在 transitionTo方法中执行回调钩子
  beforeEach (cb) {
    this.beforeEachHooks.push(cb)
  }
}

注意！只有当全部钩子都执行完了，才会去渲染新的路由组件

transitionTo (location, listener) {
    const record = this.router.match(location) // 匹配路由记录
  const route = createRoute(record, { path: location }) // 生成路由对象

  const queue = [].concat(this.router.beforeEachHooks)
  runQueue(queue, this.current, route, () => {
    this.current = route // 更新当前的 current对象， 稍后我们就可以切换页面显示
    listener && listener() // 添加路由监听器 or 更改地址栏url
    this.cb && this.cb(route) // 更新 app._route
  })
}

function runQueue (queue, from, to, cb) {
  function step (index) {
    if (index >= queue.length) return cb()
    const hook = queue[index] // hook就是我们的钩子方法
    hook(from, to, () => step(index + 1)) // 第三个参数就是 next方法
  }
  step(0)
}

base 是 HashHistory 和 Html5History 的基类，主要负责统一处理路由跳转逻辑，它在 src/history/base.js中定义。让我们重点来分析下 transitionTo 的内部实现

class Base {
  constructor (router) {
    this.router = router
    this.current = createRoute(null, {
      path: '/'
    })
  }

  // 缓存更新_route的回调（this._route = route）
  listen (cb) {
    this.cb = cb
  }

  // 所有的跳转逻辑都在这个方法中实现
  // 根据路径匹配对应的路由记录，然后更新当前的 current对象 和 app._route对象。
  // 我们之前用 defineReactive 将 app._route 变成了响应式对象，app._route发生变化后，会触发 setter 劫持，通知 router-view 重新渲染新路径的组件
  transitionTo (location, listener) {
    // 根据一个路径匹配对应的路由信息
    const record = this.router.match(location)

    const route = createRoute(record, { path: location })

    // 去重：当前跳转的路径location 和 我们之前存的current.path 相同，而且匹配结果也相同（初始化path:'/'需要额外判断匹配结果matched），则不再跳转了
    if (location === this.current.path && route.matched.length === this.current.matched.length) {
      return
    }
    // 如果是 hash模式，并且使用 hashchange监听路由时，初始化页面 和 通过route-link跳转页面时
    // transitionTo方法执行了两次（此处打印了两遍），需要去重处理，当前跳转的路由location 和 上次的跳转的路由（v3中实现此属性）作比较；若一致，则return
    console.log('transitionTo（record）', record, route)

    const queue = [].concat(this.router.beforeEachHooks) // 我们可能有多个钩子
    runQueue(queue, this.current, route, () => {
      this.current = route // 更新当前的 current对象， 稍后我们就可以切换页面显示

      // 添加路由监听器 or 更改地址栏url
      listener && listener()

      // 更新 app._route
      this.cb && this.cb(route)
    })
  }
}

export default Base

/**
 * @desc 根据树形结构record路由信息 返回一个 扁平化的上下级路由数据
 * 返回示例：{path:'/', matched:[]}
 * 返回示例：{path:'/about/a', matched:[aboutRecord, aboutARecord]}
 */
function createRoute (record, location) {
  const matched = []
  if (record) {
    while (record) {
      matched.unshift(record) // [about, about/a]
      record = record.parent
    }
  }
  return {
    ...location,
    matched
  }
}

/**
 * @name 执行路由守卫钩子
 * @desc 如果有多个beforeEach钩子，只有在上一个钩子中执行了next方法，我们才会运行下一个钩子
 * @desc 只要有一个钩子未执行next方法，则终止（后续的钩子、跳转逻辑均不执行）
 */
function runQueue (queue, from, to, cb) {
  function step (index) {
    if (index >= queue.length) return cb()
    const hook = queue[index] // hook就是我们的钩子方法
    hook(from, to, () => step(index + 1)) // 第三个参数就是 next方法
  }
  step(0)
}

让我们根据一个具体场景去进行分析，假如我们要跳转http://localhost:8080/about/a URL，路由配置如下：

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'a',
        component: {
          render: (h) => <h2>about a</h2>
        }
      },
    ]
  },
  ...
]

  1. 首先会通过 router.match() 根据路径 /about/a 去匹配对应的路由记录 record，match 方法是之前由 createMatcher 生成的，record 路由记录结构如下，此处仅展示部分属性

    {
    "path": "/about/a",
    "component": { about/a 组件定义 },
    "parent": {
    "path": "/about",
    "component": { about 组件定义 }
    }
    }

  2. 然后通过 createRoute() 生成一个扁平化的上下级路由数据 route，这就是我们常用的 this.$route 路由对象，route 对象格式如下，此处仅展示部分属性

    {
    "path": "/about/a",
    "matched": [
    {
    "path": "/about",
    "component": { about 组件定义 }
    },
    {
    "path": "/about/a",
    "component": { about/a 组件定义 },
    "parent": {
    "path": "/about",
    "component": { about 组件定义 }
    }
    }
    ]
    }

  3. 跳转一次路由有可能会多次执行 transitionTo 方法，所以我们需要做去重处理，如果当前跳转的路径和我们之前缓存的相同，则 return

  4. 如果全部导航守卫钩子都执行完了，则更新当前的 current 对象，并更新根实例上的 _route 响应式对象，然后通知 <router-view> 去渲染新的路由组件，至于<router-view> 是如何去渲染新组件的，我们下一章节再去分析

<router-view> 全局组件的注册也是在 VueRouter 类上的 install 方法中，其组件实现是在 src/components/view.js 中

export default {
  functional: true,
  render (h, { parent, data }) {
    // 默认先渲染 app.vue中的 router-view；再渲染 Home 或 About中的 router-view

    data.routerView = true // 标识该组件是通过 route-view 渲染出来的
    const route = parent.$route // install.js中代理的$route

    let depth = 0
    while (parent) {
      // $vnode 指的是组件本身虚拟DOM
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++
      }
      parent = parent.$parent // 不停的向上查找父组件
    }

    // matched是一个包含上下父子路由记录的数组，格式如下：[aboutRecord, aboutARecord]
    const record = route.matched[depth]

    // 没有匹配到组件直接return
    if (!record) {
      return h()
    }

    return h(record.component, data)
  }
}

那么跳转路由后，<router-view>又是如何知道去渲染新组件的呢？何时渲染？渲染哪一个组件？

先来看第一个问题，何时去渲染？

我们之前用 defineReactive 方法将根实例上的 _route 属性变成了一个响应式对象，并在 Vue 原型上代理了 $route 属性。而<router-view> 组件的 render 函数引用了 $route 属性，所以当 _route 变化后，会触发 setter 劫持，通知 <router-view> 去自动渲染新的组件

beforeCreate () {
  if (this.$options.router) {
    Vue.util.defineReactive(this, '_route', this._router.history.current)
  }
}

Object.defineProperty(Vue.prototype, '$route', {
  get () {
    return this._routerRoot && this._routerRoot._route
  }
})

第二个问题，他怎么知道渲染哪个组件？

$route 对象的 matched 属性是一个包含上下父子路由记录的数组，在 transitionTo 方法中被创建

让我们看一个具体的路由配置：

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'a', // children中路径不能增加 /
        component: {
          render: (h) => <h2>about a</h2>
        }
      },
    ]
  },
    ...
]

当我们访问 http://localhost:8080/about/a URL时， _route 对象（即 this.$route）格式如下：

{
  "path": "/about/a",
    "matched": [
      {
        "path": "/about",
        "component": { about 组件定义 }
      },
      {
        "path": "/about/a",
        "component": { about/a 组件定义 },
        "parent": {
          "path": "/about",
          "component": { about 组件定义 }
        }
      }
    ]
}

<router-view> 中 render 函数执行时，我们会不停的向上查找父组件，看是否有 routerView 标识，若存在，则索引深度 depth + 1，然后渲染 h(route.matched[depth].component, data)。

组件的渲染是树状的，默认先渲染 app.vue 中的 <router-view>， h(route.matched[0].component, data)，即 About 组件；再渲染 About 中的 <router-view>，h(route.matched[1].component, data)，即 About/a 组件

6. 参考链接

浅显易懂的vue-router源码解析(一)

vue-router 源码分析 - 李宇仓 | Li Yucang

珠峰公开课 | vue-router 源码

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

图书商城项目练习②后端服务Node/Express/Sqlite
图书商城项目练习①管理后台Vue2/ElementUI
一文了解 history 和 react-router 的实现原理

4

Shodan使用指南

5

从零玩转系列之微信支付实战PC端项目构建+页面基础搭建 | 技术创作特训营第一期

6

React Router@3.x 升级到 @6.x 的实施方案