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视图显示。

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

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

相关推荐
愚公搬代码13 小时前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全
Cache技术分享13 小时前
503. Java 反射 - 编写 ServiceFactory 类
前端·后端
赵大仁13 小时前
AI 限流 UX 设计:排队、降级、告知与用户预期管理
前端·ai·限流·用户体验·产品设计
__sjfzllv___13 小时前
在职前端Leader学习/转行 AI Agent -DAY37
前端
用户21816970493013 小时前
Flutter (二十二) GlobalKey
前端
用户21816970493013 小时前
Flutter (二十一) 下拉刷新,加载更多
前端
breeze jiang14 小时前
Next.js 16 App Router 实战:从 About、Blog 动态路由到全局 404
开发语言·javascript·ecmascript
小蒜学长14 小时前
vue旅游攻略网站(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端·旅游
IT_陈寒15 小时前
Python装饰器把我坑惨了,原来这样用才不掉链子
前端·人工智能·后端
程序员爱钓鱼15 小时前
Rust Associated Type关联类型详解:为Trait定义内部类型
前端·后端·rust