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

Posted 2021-09-25 mengyuhang4879

引言

接下来几篇文章写一写最近学习的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 <h1>about A</h1>}
          }
        },
        {
          path: \'b\', component: {
            render(h) {return <h1>about B</h1>}
          }
        }
      ]
    }
  ]
})
//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
    }
  },