引言
接下来几篇文章写一写最近学习的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
}
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。