Vue Router的导航解析过程
在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步。
12步如下:
- 导航被触发。
- 在失活的组件里调用离开守卫beforeRouteLeave 。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
红色的钩子函数是全局的,蓝色的钩子函数是路由特有的,粉紫色的钩子函数是组件内部的。
如果具体钩子函数的用法不是很清晰的话,建议再读读官方文档
最常用的是全局的 beforeEach 守卫。
Vue Router的导航解析过程的更多相关文章
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- 【11】vue router 之导航钩子
导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue 路由导航解析流程
Vue Router完整的导航解析流程
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 8. Vue - Router
一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...
随机推荐
- Linux - 网络配置( CentOS 64 )
终于..今天我终于将linux的网络调试出来了,虽然之前看了一大堆教程,每一个都是一样的步骤,但是,在我这就是弄不好,所以经过不断尝试的我,今天发一个自己配置好的步骤,唉,太痛苦了. - 对了补充一句 ...
- MySQL优化时怎么入手?慢查询怎么优化?
1.数据类型优化 2.创建高性能索引 3.架构底层配置方面 4.硬件 慢查询: 1.定位慢查询 首先先打开慢查询日志设置慢查询时间 2.分析慢查询(使用explain工具分析sql语句) 3.优化慢查 ...
- easyui--权限管理
1.权限目的: 是为了让不同的用户可以操作系统中不同资源 直接点说就是不同的用户可以操作不同的菜单 核心:实现菜单权限的核心思想就是控制用户登录后台所传递的menuId(与树形菜单分类列段 ...
- ajax当有返回值时
当ajax方法里面有return 值时,无法使用两种精简版的只能使用经典版 因为ajax 方法时异步的,正确的方式时使用经典版中async:false 设置为同步 默认为true 是异步 正确代码如 ...
- LeetCode按照解题方法分类题目
解题方法分类 1. 滑动窗口. 2. 双指针. 3. 快慢指针. 4. 区间合并. 5. 循环排序. 6. 原地反转链表. 7. 树上的BFS. 8. 树上的DFS. 9. 双堆. 10. 子集. 1 ...
- 32 | 为什么还有kill不掉的语句?
在 MySQL 中有两个 kill 命令:一个是 kill query + 线程 id,表示终止这个线程中正在执行的语句:一个是 kill connection + 线程 id,这里 connecti ...
- 8、RDD持久化
一.RDD持久化 1.不使用RDD持久化的问题 2.RDD持久化原理 Spark非常重要的一个功能特性就是可以将RDD持久化在内存中.当对RDD执行持久化操作时,每个节点都会将自己操作的RDD的par ...
- 全栈开发工程师微信小程序-下
app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World&l ...
- ROS与树莓派的结合
从零开始学树莓派和ROS 今天写下自己的第一篇博客,记录一下自己的学习历程和学习过程中碰到的各种小问题,供同道者参阅和自己以后回顾用 ,水平不高,我就放开手写吧,反正也不会有人看. 我现在在做毕业设计 ...
- [信息收集]11种绕过CDN查找真实IP方法【转载】
今天在看一些有关CDN的文章的时候,发现一篇写的蛮好的文章,故转载过来. 原文链接:https://www.cnblogs.com/qiudabai/p/9763739.html 0x01 验证是否存 ...