VueRouter源码分析--源码大纲

针对于VueRouter的源码分析,其实可以分为两部分来分析,或者说大部分的Vue插件都可以按照这样的方式去区分:安装插件的install方法和插件本身实例(Class)的实现。

  1. install方法
    在install方法中的操作其实可以分为三部分:
    1. 封装了一个mixin
    2. 注册了两个全局组件
    3. 定义了两个原型属性
  2. 插件类的实现
    每一个插件类的实现,其代码内容是相当庞大的,必须借助拆分的方法继续进行拆分,才有继续学下去勇气。
    VueRouter类的实现可以分为三部分,之后再细分,这三部分的内容:
    1. VueRouter的构造函数(constructor)
      1.1. 初始化路由钩子队列
      1.2. 初始化matcher用于处理路由匹配逻辑并创建了路由对象
      1.3. 初始化history用于执行过渡逻辑并执行钩子队列
    2. VueRouter的路由切换逻辑的执行(首次执行)
      2.1. init方法中调用history对象的transitionTo方法
      2.2. 在transitionTo方法中通过Router实例的match方法获取当前路由匹配的数据并赋值给一个新对象route
      2.3. 把route传递给confirmTransition方法,执行钩子队列中的事件
      2.4. 在confirmTransition的成功回调函数中,更新current对象,引起被响应式化的_route更新从而触发组件重新渲染,
      2.5 调用ensureURL触发各自模式的路由更新方法,切换切面
    3. 路由的页面切换(非首次执行)
      3.1 在各自模式的push、replace、back等可以改变页面路由的方法,都是先调用transitionTo方法,然后在其成功回调函数中调用各自模式的更新路由的方法(pushHash、pushState)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端SkyRain

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值