vue-router路由跳转原理

突发奇想,vue-router做单页面应用的时候是如何保证路由跳转的呢?

源码中有两种模式,一种的history模式,另一种是hash模式。

其中abstract模式的应用场景应该是服务端渲染的时候,暂不考虑

以history模式为例,要实现一个完整的路由跳转,会经过如下路径:

    history.transition() -> history.confirmTransition() ->history.update(route)->app._route=route 

其中当app._route=route此时会触发vue组件的re-render,那么为什么呢?

因为

在这个地方使用vue的工具函数,使得_route属性被劫持,当_router初始赋值get时就已经收集了vm._watcher,该watcher是专门用来render该vm实例的,所有当app._router=router时就触发了re-render,通过router-view函数式组件render出匹配的组件。其中this._router.init(this)就是将app=this.

当然为了适应用户通过前进后退来进行单页切换的场景,vue-router里通过监听popstate事件来触发跳转


当然,在路由跳转过去中,vue-router底层通过对前后的组件进行比较判断出deactived,actived,updated的组件,然后提供组件切换过程的一些钩子函数,辅助开发者进行特性开发

如下:

文笔不怎么地,求踩!!!!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue八个生命周期 beforeCreate【创建前】created【创建后】 beforeMount【载入前】 ...
    艾萨克菊花阅读 1,388评论 0 12
  • 回忆: 我们知道,h5的history或者hash帮助我们解决了,变化url跳转页面不发送请求,并且我们能监听到u...
    LoveBugs_King阅读 3,718评论 0 5
  • 前言 Vue.js 的核心包括一套“响应式系统”。 “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码...
    world_7735阅读 962评论 0 2
  • 前言 Vue.js 的核心包括一套“响应式系统”。 “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码...
    NARUTO_86阅读 37,693评论 8 86
  • 渲染函数和jsx 在vue中我们可以不用template来指定组件的模板,而是用render函数来创建虚拟dom结...
    6e5e50574d74阅读 738评论 0 0