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

相关推荐
TimelessHaze5 分钟前
从"切图崽"到前端工程师:React 到底是个啥?🚀
前端·react.js·ai编程
站在风口的猪11089 分钟前
《前端面试题:CSS的display属性》
前端·css·html·css3·html5
wandongle10 分钟前
HTML 面试题错题总结与解析
前端·面试·html
Code_Geo12 分钟前
前端打包工具简单介绍
前端·打包工具
断竿散人16 分钟前
专题一、HTML5基础教程-Meta标签网页元数据:网页的隐形指挥官
前端
MrSkye18 分钟前
🚀 由Tony Stark 带你入门 JavaScript(新手向)🚀
前端·javascript·面试
香蕉可乐荷包蛋19 分钟前
前端现行架构浅析
前端·架构
掘金安东尼20 分钟前
仅仅是发送一封邮件?暴露安全边界!
javascript·vue.js·面试