阅读本文🦀

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-link    router-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 🌟🌟🌟