简介接下来的几篇文章会写一下最近学习的Vue中的路由原理。那么在讲原理之前，我们先来看看它是如何使用的。路由的使用importVuefrom'vue'importRouterfrom'vue-router'importHomefrom'./views/Home.vue'importAboutfrom'./views/About.vue'Vue.use(Router);//使用Vue-Router插件exportdefaultnewRouter({//创建一个Vue-router实例并将该实例注入main.jsroutes:[{path:'/',name:'home',component:Home},{path:'/about',name:'about',component:About,children:[{path:'a',component:{render(h){return

aboutA

}}},{path:'b',component:{render(h){return

aboutB

}}}]}]})//mainnewVue({router,//将路由器实例注入根instancerender:h=>h(App)}).$mount('#app')vue.use(Router)是做什么的？首先，上面的文章写了Vue.use的原理，所以vueRouter中应该有一个install方法。默认情况下，安装函数被执行。在本文中，我们将首先看一下install函数中做了什么。使用Vue.mixin方法为所有全局组件注入一个生命周期函数beforeCreatevarisDef=function(v){returnv!==undefined;};vue.mixin({beforeCreate:functionbeforeCreate(){//$options是上面根实例的属性，newVue({})指的是传入的对象，上面使用的方法也写着传入的是vueRouter的实例,如果存在则一定是root实例else{//这是一个递归操作，让全局组件通过this._routerRoot找到根实例this._routerRoot=this.$parent&&this.$parent._routerRoot}},