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核心原理

相关推荐
2401_878454532 分钟前
HTML和CSS的复习2
前端·css·html
We་ct10 分钟前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器
ZC跨境爬虫11 分钟前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫13 分钟前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
GISer_Jing16 分钟前
AI原生前端工程化进阶实践:从流式交互架构到端云协同全链路落地
前端·人工智能·后端·学习
被考核重击19 分钟前
Vue响应式原理(下)
前端·javascript·vue.js
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人9 小时前
HTML 字符引用完全指南
开发语言·前端·html
matlab_xiaowang9 小时前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
幼儿园技术家9 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端