Vue-router源码-各原理简单总结

1，初始化

初始化之前，首先要通过import VueRouter导入，说明VueRouter也是一个对象。通过源码看到，在new Vue()的时候，将实例化的router对象传入，然后与vuex同样的原理，利用data实现响应式，在Vue.use调用router对象的install方法时初始化，注册插件，将插件存入installedPlugins中保证不会重复注册，挂载到全局，同样也是借助beforeCreate钩子函数实现。

2，router-view

router-link和router-view两个组件就是通过传进来的Vue对象定义的Vue.component('router-view',{ render(h) { xxx} })，然后通过render方法编写的渲染逻辑。

无论是hash模式还是history模式，其原理都是监听相应的改变事件，利用vue的内部响应式原理，url发生变化来通知观察者刷新router-view视图显示。

3，router-link

同上，router-link的定义为Vue.component('router-link',{ render(h) { xxx} })，但是router-link的render函数是将他渲染成了a标签，通过a标签改变url，完成视图的更新。

其他详细解读可参考手写vue-router核心原理