Vue子组件调用$router的底层实现原理

我们引入VueRouter插件之后,想要是用VueRouter的话就需要使用this.$router()方法.这是为啥??为啥在每一个组件里面想要调换都要使用this.$router()呢???

答: 1.在源码中执行install方法的时候,调用了Vue.mixin()方法,具体内容为: 在最上层父元素身上将自己放在了这个routerRoot属性身上,等遇到了子组件的时候回去看看$parent是否存在,存在的话就将自己父元素身上的routerRoot放在了自己的routerRoot身上,这样依次执行,所有的组件就都有了routerRoot属性了,而且这个routerRoot属性就是最上层的Vue实例.

​ 2.在初始化的时候调用了一个ObjecDefinePrototy()方法,在这个最上层Vue实例身上代理上了一个$router属性,getter具体内容为: return this.routerRoot._router(这个_router是在最一开始放置在总Vue身上的属性,这个属性就是传入进来的router实例),这样的话当子组件渲染的时候,调用this.$router属性,自己组件身上没有,就会向上找,找到最上面有$router属性,然后执行了getter方法,这个方法就将自己组件身上的routerRoot._router对象返回了回去.

综上:在所有子组件里面调用的路由跳转方法全都是同一个路由实例对象,在初始化的时候实现了全局共享