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

相关推荐
wordbaby19 小时前
Flutter Form Builder 完全指南:告别 Controller 地狱
前端·flutter
A***071719 小时前
React数据可视化应用
前端·react.js·信息可视化
泉城老铁19 小时前
Vue2实现语音报警
前端·vue.js·架构
q***040520 小时前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
临江仙45520 小时前
前端骚操作:用户还在摸鱼,新版本已悄悄上线!一招实现无感知版本更新通知
前端·vue.js
想个什么名好呢20 小时前
解决uniapp的H5项目uni-popup页面滚动穿透bug
前端
用户938169125536020 小时前
Vue3项目--mock数据
前端
前端加油站20 小时前
一种新HTML 页面转换成 PDF 技术方案
前端·javascript·vue.js
w***Q35020 小时前
Vue打包
前端·javascript·vue.js
有事没事实验室20 小时前
router-link的custom模式
前端·javascript·vue.js