Vue：VueRouter的基本原理解析

[huaTJ0210]

以router.push('xxx')为主线，描述路由导航的过程

1、基本过程

• router.push(path) 会触发底层history库（VueRouter底部依赖库）的transitionTo方法
• 在transitionTo方法中： 1、根据path获取到要更新的路由信息route（主要是通过path去路由配置表中去匹配）； 2：触发history的callback函数cb(route)； 3、调用修改导航栏地址的方法；
• cb（该函数在browser和hash中被注册）被调用接收最新的route，然后更新响应式的_route(绑定在全局vue实例上app._vue);进而引发组件的重新渲染

2、根Vue实例上存在一个响应式的_vue属性，何时被挂载的？

• 在VueRouter的install方法中会触发Vue.mixin的beforeCreate方法；
  • 此方法中会在Vue根实例上挂载一个响应式属性_vue；然后调用Router的init方法，将根实例传入到Router中(这样history.cb方法内部就能更新_route)；
  • _route变化就会通知watcher（属于根实例）进而进行组件的整体渲染；
  • 在整体渲染中router-view组件根据匹配到的组件调用render函数进行渲染；

[huaTJ0210]

完结