vue-router源码解读–install过程

时间:2021-6-12 作者:qvyue

目录导航

import VueRouter 实际上导出的是VueRouter类,并将install作为公共静态方法挂载,这将在执行Vue.use时被执行并传入Vue

vue-router源码解读--install过程

install函数如下

vue-router源码解读--install过程

框红一的位置,用来避免可能存在的多次install函数调用,因为保持在函数上的属性installed和全局的_Vue在当前作用域是永久性的

框红二的位置,定义isDef函数判断一个值是否存在;定义registerInstance函数,这将向vue组件实例上注册路由

框红三的位置,调用Vue的mixin方法向全局混入钩子函数,那么在每个组件中都会被执行一次,那么当组件被创建过程中,将会调用callHook函数执行到beforeCreate

vue-router源码解读--install过程

        bullet 对于根组件,我们一般会将路由配置作为router属性挂载,那么在根组件的创建过程中就将路由配置对象添加到当前的vue实例中,并且使_routerRoot持有根路由,那么在子组件中执行到beforeCreate时,将进入else逻辑从_routerRoot中获取,这保证了每一个组件中都能拿到路由

        bullet 执行init函数,这在之后作具体分析

        bullet 执行Vue.util.defineReactive对_route进行观测,这在之后作具体分析

框红四的位置,将路由设置为响应式对象,以便我们可以在组件中拿到路由配置对象。尽管我们一般不会这样去做

框红五的位置,定义全局组件,这样我们就可以在任意组件内使用路由标签控制跳转或路由视图组合布局

最后定义一些合并策略


故,可得出两点总结:对于Vue插件一般通过install方法向Vue混入一些能力;VueRouter的初始化是在组件的beforeCreated生命周期函数中进行的

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。