关于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>}          }        }      ]    }  ]})//mainnew 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    }  },