Vue 源码深入解析之 Vue Router、路由注册 和 VueRouter 对象

亦凉 2023-02-20 08:27 95阅读 0赞

一、Vue-Router

  1. 路由，它的作用就是根据不同的路径映射到不同的视图。我们在用 Vue 开发过实际项目的时候都会用到 Vue-Router 这个官方插件来帮我们解决路由的问题。Vue-Router 的能力十分强大，它支持 hash、history、abstract 三种路由方式，提供了 <router-link> 和 <router-view> 两种组件，还提供了简单的路由配置和一系列好用的 API。

  2. 大部分人已经掌握了路由的基本使用，但使用的过程中也难免会遇到一些坑，那么这里我们就来深挖 Vue-Router 的实现细节，一旦我们掌握了它的实现原理，那么就能在开发中对路由的使用更加游刃有余。同样我们也会通过一些具体的示例来配合讲解，先来看一个最基本使用例子：


    Hello App!






    Go to Foo
    Go to Bar





    import Vue from ‘vue’
    import VueRouter from ‘vue-router’
    import App from ‘./App’

    Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: ‘

    foo
    ‘ }
    const Bar = { template: ‘
    bar
    ‘ }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中”component” 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
    { path: ‘/foo’, component: Foo },
    { path: ‘/bar’, component: Bar }
    ]

    // 3. 创建 router 实例，然后传 routes 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
    el: ‘#app’,
    render(h) { 

    1. return h(App)

    },
    router
    })

这是一个非常简单的例子，接下来我们先从 Vue.use(VueRouter) 说起。

二、路由注册

  1. Vue 从它的设计上就是一个渐进式 JavaScript 框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。Vue-Router 就是官方维护的路由插件，在介绍它的注册实现之前，我们先来分析一下 Vue 通用的插件注册原理。

  2. Vue.use，Vue 提供了 Vue.use 的全局 API 来注册这些插件，所以我们先来分析一下它的实现原理，定义在 vue/src/core/global-api/use.js 中：

    export function initUse (Vue: GlobalAPI) {
    Vue.use = function (plugin: Function | Object) { 

    1. const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    2. if (installedPlugins.indexOf(plugin) > -1) { 
    3.   return this
    4. }
    6. const args = toArray(arguments, 1)
    7. args.unshift(this)
    8. if (typeof plugin.install === 'function') { 
    9.   plugin.install.apply(plugin, args)
    10. } else if (typeof plugin === 'function') { 
    11.   plugin.apply(null, args)
    12. }
    13. installedPlugins.push(plugin)
    14. return this

    }
    }

  3. Vue.use 接受一个 plugin 参数，并且维护了一个 _installedPlugins 数组，它存储所有注册过的 plugin；接着又会判断 plugin 有没有定义 install 方法，如果有的话则调用该方法，并且该方法执行的第一个参数是 Vue；最后把 plugin 存储到 installedPlugins 中。

  4. 由此可以看到 Vue 提供的插件注册机制很简单，每个插件都需要实现一个静态的 install 方法，当我们执行 Vue.use 注册插件的时候，就会执行这个 install 方法，并且在这个 install 方法的第一个参数我们可以拿到 Vue 对象，这样的好处就是作为插件的编写方不需要再额外去import Vue 了。

  5. 路由安装，Vue-Router 的入口文件是 src/index.js，其中定义了 VueRouter 类，也实现了 install 的静态方法：VueRouter.install = install，它的定义在 src/install.js 中，如下所示：

    export let _Vue
    export function install (Vue) {
    if (install.installed && _Vue === Vue) return
    install.installed = true

    _Vue = Vue

    const isDef = v => v !== undefined

    const registerInstance = (vm, callVal) => { 

    1. let i = vm.$options._parentVnode
    2. if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { 
    3.   i(vm, callVal)
    4. }

    }

    Vue.mixin({ 

    1. beforeCreate () { 
    2.   if (isDef(this.$options.router)) { 
    3.     this._routerRoot = this
    4.     this._router = this.$options.router
    5.     this._router.init(this)
    6.     Vue.util.defineReactive(this, '_route', this._router.history.current)
    7.   } else { 
    8.     this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    9.   }
    10.   registerInstance(this, this)
    11. },
    12. destroyed () { 
    13.   registerInstance(this)
    14. }

    })

    Object.defineProperty(Vue.prototype, ‘$router’, { 

    1. get () {  return this._routerRoot._router }

    })

    Object.defineProperty(Vue.prototype, ‘$route’, { 

    1. get () {  return this._routerRoot._route }

    })

    Vue.component(‘RouterView’, View)
    Vue.component(‘RouterLink’, Link)

    const strats = Vue.config.optionMergeStrategies
    strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
    }

  6. 用户执行 Vue.use(VueRouter) 的时候，实际上就是在执行 install 函数，为了确保 install 逻辑只执行一次，用了 install.installed 变量做已安装的标志位。另外用一个全局的 _Vue 来接收参数 Vue，因为作为 Vue 的插件对 Vue 对象是有依赖的，但又不能去单独去 import Vue，因为那样会增加包体积，所以就通过这种方式拿到 Vue 对象。

  7. Vue-Router 安装最重要的一步就是利用 Vue.mixin 去把 beforeCreate 和 destroyed 钩子函数注入到每一个组件中。Vue.mixin 的定义，在 vue/src/core/global-api/mixin.js 中：

    export function initMixin (Vue: GlobalAPI) {
    Vue.mixin = function (mixin: Object) { 

    1. this.options = mergeOptions(this.options, mixin)
    2. return this

    }
    }

  8. 它的实现实际上非常简单，就是把要混入的对象通过 mergeOptions 合并到 Vue 的 options 中，由于每个组件的构造函数都会在 extend 阶段合并 Vue.options 到自身的 options 中，所以也就相当于每个组件都定义了 mixin 定义的选项。

  9. 回到 Vue-Router 的 install 方法，先看混入的 beforeCreate 钩子函数，对于根 Vue 实例而言，执行该钩子函数时定义了 this._routerRoot 表示它自身；this._router 表示 VueRouter 的实例 router，它是在 new Vue 的时候传入的；另外执行了 this._router.init() 方法初始化 router，这个逻辑之后介绍，然后用 defineReactive 方法把 this._route 变成响应式对象，这个作用我们之后会介绍。而对于子组件而言，由于组件是树状结构，在遍历组件树的过程中，它们在执行该钩子函数的时候 this._routerRoot 始终指向的离它最近的传入了 router 对象作为配置而实例化的父实例。
  10. 对于 beforeCreate 和 destroyed 钩子函数，它们都会执行 registerInstance 方法。接着给 Vue 原型上定义了 $router 和 $route 两个属性的 get 方法，这就是为什么我们可以在组件实例上可以访问 this.$router 以及 this.$route。接着又通过 Vue.component 方法定义了全局的 <router-link> 和 <router-view> 两个组件，这也是为什么我们在写模板的时候可以使用这两个标签。最后定义了路由中的钩子函数的合并策略，和普通的钩子函数一样。
  11. 总结：我们分析了 Vue-Router 的安装过程，Vue 编写插件的时候通常要提供静态的 install 方法，我们通过 Vue.use(plugin) 时候，就是在执行 install 方法。Vue-Router 的 install 方法会给每一个组件注入 beforeCreate 和 destoryed 钩子函数，在 beforeCreate 做一些私有属性定义和路由初始化工作，接下来我们就来分析一下 VueRouter 对象的实现和它的初始化工作。

三、VueRouter 对象

  1. VueRouter 的实现是一个类，我们先对它做一个简单地分析，它的定义在 src/index.js 中：

    export default class VueRouter {
    static install: () => void;
    static version: string;

    app: any;
    apps: Array;
    ready: boolean;
    readyCbs: Array;
    options: RouterOptions;
    mode: string;
    history: HashHistory | HTML5History | AbstractHistory;
    matcher: Matcher;
    fallback: boolean;
    beforeHooks: Array<?NavigationGuard>;
    resolveHooks: Array<?NavigationGuard>;
    afterHooks: Array<?AfterNavigationHook>;

    constructor (options: RouterOptions = { }) { 

    1. this.app = null
    2. this.apps = []
    3. this.options = options
    4. this.beforeHooks = []
    5. this.resolveHooks = []
    6. this.afterHooks = []
    7. this.matcher = createMatcher(options.routes || [], this)
    9. let mode = options.mode || 'hash'
    10. this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    11. if (this.fallback) { 
    12.   mode = 'hash'
    13. }
    14. if (!inBrowser) { 
    15.   mode = 'abstract'
    16. }
    17. this.mode = mode
    19. switch (mode) { 
    20.   case 'history':
    21.     this.history = new HTML5History(this, options.base)
    22.     break
    23.   case 'hash':
    24.     this.history = new HashHistory(this, options.base, this.fallback)
    25.     break
    26.   case 'abstract':
    27.     this.history = new AbstractHistory(this, options.base)
    28.     break
    29.   default:
    30.     if (process.env.NODE_ENV !== 'production') { 
    31.       assert(false, `invalid mode: ${ mode}`)
    32.     }
    33. }

    }

    match (

    1. raw: RawLocation,
    2. current?: Route,
    3. redirectedFrom?: Location

    ): Route { 

    1. return this.matcher.match(raw, current, redirectedFrom)

    }

    get currentRoute (): ?Route { 

    1. return this.history && this.history.current

    }

    init (app: any) { 

    1. process.env.NODE_ENV !== 'production' && assert(
    2.   install.installed,
    3.   `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
    4.   `before creating root instance.`
    5. )
    7. this.apps.push(app)
    9. if (this.app) { 
    10.   return
    11. }
    13. this.app = app
    15. const history = this.history
    17. if (history instanceof HTML5History) { 
    18.   history.transitionTo(history.getCurrentLocation())
    19. } else if (history instanceof HashHistory) { 
    20.   const setupHashListener = () => { 
    21.     history.setupListeners()
    22.   }
    23.   history.transitionTo(
    24.     history.getCurrentLocation(),
    25.     setupHashListener,
    26.     setupHashListener
    27.   )
    28. }
    30. history.listen(route => { 
    31.   this.apps.forEach((app) => { 
    32.     app._route = route
    33.   })
    34. })

    }

    beforeEach (fn: Function): Function { 

    1. return registerHook(this.beforeHooks, fn)

    }

    beforeResolve (fn: Function): Function { 

    1. return registerHook(this.resolveHooks, fn)

    }

    afterEach (fn: Function): Function { 

    1. return registerHook(this.afterHooks, fn)

    }

    onReady (cb: Function, errorCb?: Function) { 

    1. this.history.onReady(cb, errorCb)

    }

    onError (errorCb: Function) { 

    1. this.history.onError(errorCb)

    }

    push (location: RawLocation, onComplete?: Function, onAbort?: Function) { 

    1. this.history.push(location, onComplete, onAbort)

    }

    replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { 

    1. this.history.replace(location, onComplete, onAbort)

    }

    go (n: number) { 

    1. this.history.go(n)

    }

    back () { 

    1. this.go(-1)

    }

    forward () { 

    1. this.go(1)

    }

    getMatchedComponents (to?: RawLocation | Route): Array { 

    1. const route: any = to
    2.   ? to.matched
    3.     ? to
    4.     : this.resolve(to).route
    5.   : this.currentRoute
    6. if (!route) { 
    7.   return []
    8. }
    9. return [].concat.apply([], route.matched.map(m => { 
    10.   return Object.keys(m.components).map(key => { 
    11.     return m.components[key]
    12.   })
    13. }))

    }

    resolve (

    1. to: RawLocation,
    2. current?: Route,
    3. append?: boolean

    ): { 

    1. location: Location,
    2. route: Route,
    3. href: string,
    4. normalizedTo: Location,
    5. resolved: Route

    } { 

    1. const location = normalizeLocation(
    2.   to,
    3.   current || this.history.current,
    4.   append,
    5.   this
    6. )
    7. const route = this.match(location, current)
    8. const fullPath = route.redirectedFrom || route.fullPath
    9. const base = this.history.base
    10. const href = createHref(base, fullPath, this.mode)
    11. return { 
    12.   location,
    13.   route,
    14.   href,
    15.   normalizedTo: location,
    16.   resolved: route
    17. }

    }

    addRoutes (routes: Array) { 

    1. this.matcher.addRoutes(routes)
    2. if (this.history.current !== START) { 
    3.   this.history.transitionTo(this.history.getCurrentLocation())
    4. }

    }
    }

  2. VueRouter 定义了一些属性和方法，我们先从它的构造函数看，当我们执行 new 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’
    this.fallback = mode === ‘history’ && !supportsPushState && options.fallback !== false
    if (this.fallback) { 

    1. mode = 'hash'

    }
    if (!inBrowser) { 

    1. mode = 'abstract'

    }
    this.mode = mode

    switch (mode) { 

    1. case 'history':
    2.   this.history = new HTML5History(this, options.base)
    3.   break
    4. case 'hash':
    5.   this.history = new HashHistory(this, options.base, this.fallback)
    6.   break
    7. case 'abstract':
    8.   this.history = new AbstractHistory(this, options.base)
    9.   break
    10. default:
    11.   if (process.env.NODE_ENV !== 'production') { 
    12.     assert(false, `invalid mode: ${ mode}`)
    13.   }

    }
    }

  3. 构造函数定义了一些属性，其中 this.app 表示根 Vue 实例，this.apps 保存持有 $options.router 属性的 Vue 实例，this.options 保存传入的路由配置，this.beforeHooks、
    this.resolveHooks、this.afterHooks 表示一些钩子函数，我们之后会介绍，this.matcher 表示路由匹配器，我们之后会介绍，this.fallback 表示在浏览器不支持 history.pushState 的情况下，根据传入的 fallback 配置参数，决定是否回退到 hash 模式，this.mode 表示路由创建的模式，this.history 表示路由历史的具体的实现实例，它是根据 this.mode 的不同实现不同，它有 History 基类，然后不同的 history 实现都是继承 History。

  4. 实例化 VueRouter 后会返回它的实例 router，我们在 new Vue 的时候会把 router 作为配置的属性传入，beforeCreate 混入的时候有这么一段代码：

    beforeCreate() {
    if (isDef(this.$options.router)) { 

    1. // ...
    2. this._router = this.$options.router
    3. this._router.init(this)
    4. // ...

    }
    }

所以组件在执行 beforeCreate 钩子函数的时候，如果传入了 router 实例，都会执行 router.init 方法：

  1. init (app: any) { 
  2.   process.env.NODE_ENV !== 'production' && assert(
  3.     install.installed,
  4.     `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
  5.     `before creating root instance.`
  6.   )
  8.   this.apps.push(app)
  10.   if (this.app) { 
  11.     return
  12.   }
  14.   this.app = app
  16.   const history = this.history
  18.   if (history instanceof HTML5History) { 
  19.     history.transitionTo(history.getCurrentLocation())
  20.   } else if (history instanceof HashHistory) { 
  21.     const setupHashListener = () => { 
  22.       history.setupListeners()
  23.     }
  24.     history.transitionTo(
  25.       history.getCurrentLocation(),
  26.       setupHashListener,
  27.       setupHashListener
  28.     )
  29.   }
  31.   history.listen(route => { 
  32.     this.apps.forEach((app) => { 
  33.       app._route = route
  34.     })
  35.   })
  36. }

  1. init 的逻辑很简单，它传入的参数是 Vue 实例，然后存储到 this.apps 中；只有根 Vue 实例会保存到 this.app 中，并且会拿到当前的 this.history，根据它的不同类型来执行不同逻辑，由于我们平时使用 hash 路由多一些，所以我们先看这部分逻辑，先定义了 setupHashListener 函数，接着执行了 history.transitionTo 方法，它是定义在 History 基类中，代码在 src/history/base.js：

    transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const route = this.router.match(location, this.current)
    // …
    }

  2. 我们先不着急去看 transitionTo 的具体实现，先看第一行代码，它调用了 this.router.match 函数：

    match (
    raw: RawLocation,
    current?: Route,
    redirectedFrom?: Location
    ): Route {
    return this.matcher.match(raw, current, redirectedFrom)
    }

实际上是调用了 this.matcher.match 方法去做匹配，所以接下来我们先来了解一下 matcher 的相关实现。

  1. 总结：我们大致对 VueRouter 类有了大致了解，知道了它的一些属性和方法，同时了解到在组件的初始化阶段，执行到 beforeCreate 钩子函数的时候会执行 router.init 方法，然后又会执行 history.transitionTo 方法做路由过渡，进而引出了 matcher 的概念，接下来我们先研究一下 matcher 的相关实现。

发表评论

表情：
评论列表 （有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-router路由

    > 在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会。 > 你好，我是梦阳辰！期待与你相遇！ 文章目录 01.什么是路

    青旅半醒青旅半醒/ 0 赞/ 321 阅读

    相关 vue-router，vue路由简介

    （一）命名路由 命名路由是目前开发当中使用最频繁的形式 通过一个名称 name：属性来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以直

    女爷i女爷i/ 0 赞/ 267 阅读