vue-router源码第一步阅读
Posted qq_27449993
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router源码第一步阅读相关的知识,希望对你有一定的参考价值。
为什么必须定义一个install
方法,并且把他赋予VueRouter
呢?其实这跟Vue.use
方法有关,大家还记得Vue是怎么使用VueRouter的吗?
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 第一步
export default new VueRouter({ // 传入的options
routes // 第二步
})
import router from './router'
new Vue({
router, // 第三步
render: h => h(App)
}).$mount('#app')
其实第二步和第三步很清楚,就是实例一个VueRouter对象,并且将这个VueRouter对象挂到根组件App上,那问题来了,第一步的Vue.use(VueRouter)是干什么用的呢?其实Vue.use(XXX)
,就是执行XXX
上的install
方法,也就是Vue.use(VueRouter) === VueRouter.install(),但是到了这,咱们是知道了install
会执行,但是还是不知道install
执行了是干嘛的,有什么用?
咱们知道VueRouter对象是被挂到根组件App上了,所以App是能直接使用VueRouter对象上的方法的,但是,咱们知道,咱们肯定是想每一个用到的组件
都能使用VueRouter的方法,比如this.$router.push
,但是现在只有App能用这些方法,咋办呢?咋才能每个组件都能使用呢?这时install
方法派上用场了,咱们先说说实现思路,再写代码哈。
vue-router是如何实现每个vue组件都能访问$router的呢,通过vue的install中写入混入实现的
const VueRouter = {}
// eslint-disable-next-line no-unused-vars
var _vue
export default VueRouter.install = (Vue) => {
_vue = Vue
// 使用Vue.mixin混入每一个组件
Vue.mixin({
// 在每一个组件的beforeCreate生命周期去执行
beforeCreate() {
if (this.$options.myRouter) {
// this 是 根组件本身
this._myrouterRoot = this
this.myRouter = this.$options.myRouter
} else {
// 非根组件,也要把父组件的_routerRoot保存到自身身上
this._myrouterRoot = this.$parent && this.$parent.myRouter
// 子组件也要挂上$router
this.myRouter = this._myrouterRoot
}
}
})
}
以上是关于vue-router源码第一步阅读的主要内容,如果未能解决你的问题,请参考以下文章
spring源码阅读笔记之HelloWorld和spring第一步ClassPathXMLApplicationContext