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)

你可能感兴趣的:(Vue,vue.js,前端,js)