在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步。

12步如下:

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫beforeRouteLeave 。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

红色的钩子函数是全局的,蓝色的钩子函数是路由特有的,粉紫色的钩子函数是组件内部的。

如果具体钩子函数的用法不是很清晰的话,建议再读读官方文档

最常用的是全局的 beforeEach 守卫。

Vue Router的导航解析过程的更多相关文章

  1. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  2. 【11】vue router 之导航钩子

    导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...

  3. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  4. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  5. Vue 路由导航解析流程

    Vue Router完整的导航解析流程

  6. vue router 导航守卫生命周期

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...

  7. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  8. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  9. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

随机推荐

  1. Linux - 网络配置( CentOS 64 )

    终于..今天我终于将linux的网络调试出来了,虽然之前看了一大堆教程,每一个都是一样的步骤,但是,在我这就是弄不好,所以经过不断尝试的我,今天发一个自己配置好的步骤,唉,太痛苦了. - 对了补充一句 ...

  2. MySQL优化时怎么入手?慢查询怎么优化?

    1.数据类型优化 2.创建高性能索引 3.架构底层配置方面 4.硬件 慢查询: 1.定位慢查询 首先先打开慢查询日志设置慢查询时间 2.分析慢查询(使用explain工具分析sql语句) 3.优化慢查 ...

  3. easyui--权限管理

    1.权限目的: 是为了让不同的用户可以操作系统中不同资源   直接点说就是不同的用户可以操作不同的菜单     核心:实现菜单权限的核心思想就是控制用户登录后台所传递的menuId(与树形菜单分类列段 ...

  4. ajax当有返回值时

    当ajax方法里面有return 值时,无法使用两种精简版的只能使用经典版 因为ajax 方法时异步的,正确的方式时使用经典版中async:false 设置为同步 默认为true  是异步 正确代码如 ...

  5. LeetCode按照解题方法分类题目

    解题方法分类 1. 滑动窗口. 2. 双指针. 3. 快慢指针. 4. 区间合并. 5. 循环排序. 6. 原地反转链表. 7. 树上的BFS. 8. 树上的DFS. 9. 双堆. 10. 子集. 1 ...

  6. 32 | 为什么还有kill不掉的语句?

    在 MySQL 中有两个 kill 命令:一个是 kill query + 线程 id,表示终止这个线程中正在执行的语句:一个是 kill connection + 线程 id,这里 connecti ...

  7. 8、RDD持久化

    一.RDD持久化 1.不使用RDD持久化的问题 2.RDD持久化原理 Spark非常重要的一个功能特性就是可以将RDD持久化在内存中.当对RDD执行持久化操作时,每个节点都会将自己操作的RDD的par ...

  8. 全栈开发工程师微信小程序-下

    app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World&l ...

  9. ROS与树莓派的结合

    从零开始学树莓派和ROS 今天写下自己的第一篇博客,记录一下自己的学习历程和学习过程中碰到的各种小问题,供同道者参阅和自己以后回顾用 ,水平不高,我就放开手写吧,反正也不会有人看. 我现在在做毕业设计 ...

  10. [信息收集]11种绕过CDN查找真实IP方法【转载】

    今天在看一些有关CDN的文章的时候,发现一篇写的蛮好的文章,故转载过来. 原文链接:https://www.cnblogs.com/qiudabai/p/9763739.html 0x01 验证是否存 ...