阅读本文🦀
1.了解到vue插件开发的基本流程
2.了解到vue-router的基本实现原理
3.自己动手实现一个函数式mini-vue-router
本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟
前言🌵
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
需求分析
SPA页面要实现URL变换但浏览器不刷新，组件切换。
需要借助浏览器提供的API history 或者hashcahnge事件来实现
原理剖析与实现 👻
创建mini-vue-router构造函数以及install静态函数
当执行vue.use注册插件的时候，vue都会先去执行一次这个插件函数的install方法
初始化MiniVueRouter构造函数
- 将路由表注册到路由实例
- 利用
Vue.util声明一个响应式数据current，挂载到mini-vue-router实例上，当然这个响应式数据声明在哪里都可以，声明在router实例上，是为了后边的router-view能够方便使用到这个响应式数据
- 监控
hashchange事件,一旦发生更新就去更新响应式数据current
MiniVueRouter绑定静态方法 intall
在install静态方法中，我们要做如下的事
- 保存Vue构造函数实例方便我们后边能够使用到Vue构造函数提供的一些静态的方法
- 利用
Vue.mixin增强组件，将mini-vue-router实例挂载到Vue的原型上，这样每个Vue组件实例就都能访问到router实例对象，从而能够访问到实例对象中的路由表，以及挂载到router实例上的响应式数据current
- 注册两个全局Vue组件
router-linkrouter-view并编写他们的render函数，在render函数中我们使用我们的响应式数据current去查找路由表中对应的路由组件，并完成渲染
- ⚠️核心，在render函数中我们使用了current这个响应式的数据，一旦它发生变化，那么我们当前组件就会重新之心render函数渲染，一切都依赖于Vue提供的响应式数据和他的依赖收集机制
创建路由表注册路由
- 使用Vue构造函数注册
mini-vue-router
- 挂载路由表到路由上并导出
测试
在main.js中导入我们mini-vue-router实例，并挂载到Vue根组件上测试
mini-vue-router 正常运行 🤪
编写文档 📃
一个库代码逻辑写好后，最重要的还有文档编写啦😁，写上好看易懂的文档，这个库就算大功告成了
本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟
收获🍁
编写这个库最大的收获了解了vue-router的基本原理，以及一些vue响应式的知识，不得不感叹，vue的设计真的是强啊，尤大太牛了，也希望通过这个项目帮助正在阅读文章的你了解到vue-router的原理
本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟
