草庐IT

关于Vue-Router 底层运行逻辑浅析

RainZe 2023-03-28 原文

1.Vue-Router

只要是使用Vue 开发程序 就不可避免的会使用到 Vue-Router ( 路由)，作为Vue生态的一部分 Vue-Router 不同于传统的开发模式，每个url都会重新加载页面，而是单页面(Single Page Application)模式是根据url加载不同的组件，这样做可以

1.监听Url的变化，并在变化前后执行相应的代码逻辑
2.不同的Url 可以对应不同的组件
3.提供了更多方式改变Url的API （Url的改变不能导致页面的刷新）

2.Vue-Router 的使用方式

1.Vue是使用.use( plugins )方法将插件注入到Vue中。use方法会检测注入插件VueRouter内的install方法，如果有，则执行install方法。

注意：如果是在浏览器环境，在index.js内会自动调用.use方法。如果是基于node环境，需要手动调用。所以在浏览器环境下可以省略不写Vue.use(VueRouter) 注册方法。

2.Install解析 (对应目录结构的install.js)

该方法内主要做了以下三件事：

1、对Vue实例混入beforeCreate钩子操作（在Vue的生命周期阶段会被调用）
2、通过Vue.prototype定义router、router、route 属性（方便所有组件可以获取这两个属性）
3、Vue上注册router-link和router-view两个组件
点击查看代码 
export function install (Vue) {
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  Vue.mixin({
    //对Vue实例混入beforeCreate钩子操作
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  //通过Vue.prototype定义$router、$route 属性（方便所有组件可以获取这两个属性）
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })
  //Vue上注册router-link和router-view两个组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

3.生成router实例

生成实例过程中，主要做了以下两件事

1、根据配置数组(传入的routes)生成路由配置记录表。
2、根据不同模式生成监控路由变化的History对象

注：History类由HTML5History、HashHistory、AbstractHistory三类继承history/base.js实现了基本history的操作history/hash.js，history/html5.js和history/abstract.js继承了base，只是根据不同的模式封装了一些基本操作

const router = new VueRouter({ routes })

4.生成Vue实例

点击查看代码 
    const app = new Vue({
      router,
      template: `
        <div id="app">
          <h1>Basic</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/user">用户</router-link></li>
            <li><router-link to="/role">角色</router-link></li>
            <router-link tag="li" to="/user">/用户</router-link>
          </ul>
          <router-view class="view"></router-view>
        </div>
      `
    }).$mount('#app')

代码执行到这，会进入Vue的生命周期，在这一步Vue-Router对Vue混入了beforeCreate钩子会在此会执行

点击查看代码 
Vue.mixin({
    beforeCreate () {
      //验证vue是否有router对象了，如果有，就不再初始化了
      if (isDef(this.$options.router)) { //没有router对象
        //将_routerRoot指向根组件
        this._routerRoot = this
        //将router对象挂载到根组件元素_router上
        this._router = this.$options.router
        //初始化，建立路由监控
        this._router.init(this)
        //劫持数据_route，一旦_route数据发生变化后，通知router-view执行render方法
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        //如果有router对象，去寻找根组件，将_routerRoot执行根组件（解决嵌套关系时候_routerRoot指向不一致问题）
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

执行完这一步后，代码完成初始化，加载页面完成，界面将默认显示主页

3.路由更新方式

1.主动触发

router-link绑定了click方法，触发history.push或者history.replace，从而触发history.transitionTo。transitionTo用于处理路由转换，其中包含了updateRoute用于更新route。在beforeCreate中有劫持route的方法，当_route变化后，触发router-view的变化。

2.地址变化（如：在浏览器地址栏直接输入地址）

HashHistory和HTML5History会分别监控hashchange和popstate来对路由变化作对用的处理 。HashHistory和HTML5History捕获到变化后会对应执行push或replace方法，从而调用transitionTo，剩下的就和上面主动触发一样

4.总结

1、安装插件混入beforeCreate生命周期处理，初始化_routerRoot，_router，_route等数据全局设置vue静态访问router和router和route，方便后期访问完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view作 为功能组件，用于触发对应路由视图的变化
2、根据路由配置生成router实例根据配置数组生成路由配置记录表生成监控路由变化的hsitory对象
3、将router实例传入根vue实例根据beforeCreate混入，为根vue对象设置了劫持字段_route，用户触发router-view的变化调用init()函数，完成首次路由的渲染，首次渲染的调用路径是 调用history.transitionTo方法，根据router的match函数，生成一个新的route对象接着通过confirmTransition对比一下新生成的route和当前的route对象是否改变，改变的话触发updateRoute，更新hsitory.current属性，触发根组件的route的变化,从而导致组件的调用render函数，更新router-view，另外一种更新路由的方式是主动触发router-link绑定了click方法，触发history.push或者history.replace,从而触发history.transitionTo同时会监控hashchange和popstate来对路由变化作对用的处理

友情连接

旭逸的博客

浅析底层routercodethisVue

有关关于Vue-Router 底层运行逻辑浅析的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  3. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  4. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  5. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  6. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  7. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

  8. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  9. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

随机推荐