来一起手写一个函数式mini-vue-router🧚🏾

速冻鱼
1,254 阅读3分钟

大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲
欢迎小伙伴们加我微信：sudongyuer拉你进群
关注我的公众号:前端速冻鱼一起进步，期待与大家共同成长🥂

阅读本文🦀

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
carbon (14)

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提供的响应式数据和他的依赖收集机制
carbon (15)

创建路由表注册路由

  • 使用Vue构造函数注册mini-vue-router
  • 挂载路由表到路由上并导出
image-20211226184043695

测试

在main.js中导入我们mini-vue-router实例，并挂载到Vue根组件上测试

image-20211226184216472

mini-vue-router 正常运行 🤪

example

编写文档 📃

一个库代码逻辑写好后，最重要的还有文档编写啦😁，写上好看易懂的文档，这个库就算大功告成了

本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟

image-20211226184602496

收获🍁

编写这个库最大的收获了解了vue-router的基本原理，以及一些vue响应式的知识，不得不感叹，vue的设计真的是强啊，尤大太牛了，也希望通过这个项目帮助正在阅读文章的你了解到vue-router的原理

本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟

结束语🌞

img

那么我的手写一个mini-vue-router🧚🏾这篇文章就结束了，文章的目的其实很简单，就是对日常工作的总结和输出，输出一些觉得对大家有用的东西，菜不菜不重要，但是热爱🔥，希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步。

github🤖:sudongyu

个人博客👨‍💻:速冻鱼blog

vx👦:sudongyuer

写在最后

伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。

avatar
文章
阅读
粉丝