关于vue.js:Vue路由实现一VueuseRouter中做了什么

引言

接下来几篇文章写一写最近学习的 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
    }
  },