vue-router源码学习笔记

参考链接：
https://github.com/DDFE/DDFE-blog/issues/9
https://juejin.im/post/58611353ac502e006739e188
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
一、前端路由变化的底层实现原理和API
首先说一下如何对前端路由进行操作，整理后绘出xmind文件。接着再说一下vue-router这个插件的注册实现。

image.png

二、插件注册
import Router from 'vue-router'
Vue.use(Router)
Vue.js 提供了插件机制 .use(plugin)，这个插件机制会调用该 plugin 对象的 install 方法。

image.png

image.png

defineReactive解答了如何根据不同的url渲染不同的组件 ---- beforeCreate 钩子函数中，在最后通过 Vue 的工具方法给当前应用实例定义了一个响应式的 _route 属性，值就是获取的 this._router.history.current，也就是当前 history 实例的当前活动路由对象。给应用实例定义了这么一个响应式的属性值也就意味着如果该属性值发生了变化，就会触发更新机制，继而调用应用实例的 render 重新渲染，router-view组件的render函数会被执行。

三、vue-router实例化
install.js实现了vue-router的注册使用，接着说说vue-router中index.js暴露出的类VueRouter，其中有两个重点：根据routes创建match函数；根据mode实例化具体的history实例。

image.png

image.png