Vue路由实现（一）:Vue.use(Router)中做了什么？

引言

接下来几篇文章写一写最近学习的Vue中的路由原理吧。那么在讲原理之前我们先来看看它是如何使用的。

路由的使用

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router);// 使用Vue-Router插件
export default new Router({ // 创建Vue-router实例，将实例注入到main.js中
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      children: [
        {
          path: 'a', component: {
            render(h) {return 
about A
}
          }
        },
        {
          path: 'b', component: {
            render(h) {return 
about B
}
          }
        }
      ]
    }
  ]
})
//main
new Vue({
  router, // 在根实例中注入router实例
  render: h => h(App)
}).$mount('#app')

vue.use(Router)做了什么？

首先上面文章已经写到了Vue.use的原理，那么vueRouter中应该有一个install方法。默认使install函数执行，我们这一篇文章先看一看install函数中做了什么。
使用Vue.mixin方法给全局所有组件注入一个生命周期函数beforeCreate

var isDef = function (v) { return v !== undefined; };
Vue.mixin({
  beforeCreate: function beforeCreate () {
  //$options是根实例上的属性，new Vue({})指的是传入的这个对象，上面使用方法也写到了传入了vueRouter的实例，如果存在的话那肯定是根实例了
    if (isDef(this.$options.router)) {
    //做了一层代理方便下面方便的找到根实例
      this._routerRoot = this;
      //保存传进来的router实例
      this._router = this.$options.router;
      //调用vueRouter类上的init方法
      this._router.init(this);
    } else {
    //这是一个递归操作，可以使全局组件都能通过this._routerRoot找到根实例
      this._routerRoot = this.$parent && this.$parent._routerRoot
    }
  },