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 ...
随机推荐
- js 定义数组转json
var msgData = {} msgData["url"] = openUrl msgData["courseName"] = val.name JSON. ...
- qt动态库实现无边框窗体的消息处理 nativeEvent的使用
需求: 在动态库中创建一个窗口句柄,可以给外部调用,库的调用者,通过这个句柄发送消息到底层库,库里面可以实现对消息的处理 m_FHandle=AllocateHWnd(WndProcDllMsg); ...
- CSS3 backface-visibility 不面向屏幕是否可见
backface-visibility 属性定义当元素不面向屏幕时是否可见. 如果在旋转元素不希望看到其背面时,该属性很有用. backface-visibility: visible|hidden; ...
- 主席树 Couriers
[bzoj3524/2223][Poi2014]Couriers 2014年4月19日1,2571 Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r ...
- NodeJS后台
NodeJS后台 后台: 1.PHP 2.Java 3.Python 优势 1.性能 2.跟前台JS配合方便 3.NodeJS便于前端学习 https://nodejs.org/en/ 1.切换盘符 ...
- Java 【 ArrayList应用 】 (SDUT 4069 C~K的班级)
Java 里面的所有的东西 数组.字符数组.等等,都要 new 新申请. C~K的班级 代码: package test; import java.util.*; public class Main ...
- Python中一些高效的数据操作
列表统计 chars = ["a", "b", "a", "c", "a", "d&quo ...
- 浅谈Min_25筛(一看就懂的那种)
作用 前提:一个积性函数\(F(i)\),要求\(F(P^k),P\in prime\)可以快速计算 实现\(O(\frac{n^{\frac{3}{4}}}{logn})\):\(\sum\limi ...
- Spring Cloud Gateway(三):网关处理器
1.Spring Cloud Gateway 源码解析概述 API网关作为后端服务的统一入口,可提供请求路由.协议转换.安全认证.服务鉴权.流量控制.日志监控等服务.那么当请求到达网关时,网关都做了哪 ...
- 如何判断Linux下 网卡是虚拟还是物理网卡?
ifconfig命令可以查看Linux系统中正在使用的网卡,包括物理网卡和虚拟网卡,如果想要查看Linux系统中全部的网卡,可以查看/proc/net/dev文件,那如何区分网卡是虚拟还是物理的呢? ...