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 分钟前
海洋模拟项目源码解析
javascript
new code Boy28 分钟前
NestJS、Nuxt.js 和 Next.js
前端·后端
Highcharts.js43 分钟前
Highcharts 使用指南Treegraph chart 树状图/结构树图|创建谱系图表、决策树、结构知识树等的图表工具
javascript·决策树·highcharts·图表开发·结构树·可视化图表库·谱系图表
进击切图仔44 分钟前
执行 shell 脚本 5 种方式对比
前端·chrome
局i1 小时前
React 简单地图组件封装:基于高德地图 API 的实践(附源码)
前端·javascript·react.js
执行部之龙1 小时前
AI对话平台核心技术解析
前端
进击的尘埃1 小时前
Service Worker + stale-while-revalidate:让页面"假装"秒开的正经方案
javascript
yuki_uix1 小时前
防抖(Debounce):从用户体验到手写实现
前端·javascript
HelloReader1 小时前
Flutter 进阶 UI搭建 iOS 风格通讯录应用(十一)
前端
wjj不想说话1 小时前
在 Vue 2.6 微前端架构中,我们为什么放弃了 Vuex 管理页面状态?
vue.js