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

相关推荐
一指流沙q4 分钟前
Chrome被360导航篡改了怎么改回来?
前端·chrome
laocooon52385788635 分钟前
HTML CSS 超链
前端·css·html
LUwantAC38 分钟前
CSS(二):美化网页元素
前端·css
素**颜1 小时前
uniapp 基于xgplayer(西瓜视频) + renderjs开发,实现APP视频播放
javascript·uni-app·音视频
m0_748251081 小时前
docker安装nginx,docker部署vue前端,以及docker部署java的jar部署
java·前端·docker
我是ed1 小时前
# thingjs 基础案例整理
前端
Ashore_1 小时前
从简单封装到数据响应:Vue如何引领开发新模式❓❗️
前端·vue.js
落魄实习生1 小时前
小米路由器开启SSH,配置阿里云ddns,开启外网访问SSH和WEB管理界面
前端·阿里云·ssh
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp (6)用户登录鉴权及发布笔记
java·vue.js·spring boot·uni-app
bug丸1 小时前
v8引擎垃圾回收
前端·javascript·垃圾回收