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 ...
随机推荐
- Educational Codeforces Round 75 (Rated for Div. 2) A. Broken Keyboard
链接: https://codeforces.com/contest/1251/problem/A 题意: Recently Polycarp noticed that some of the but ...
- PHP 函数运行的内存
函数在运行期间占用的内存,在运行结束后会被回收.但是还有问题不明白,函数内部的echo在函数执行结束后还占用内存吗??? //PHP 函数执行完内存就会被收回 function test() { ec ...
- js-清空array数组
两种实现方式: 1.splice:删除元素并添加新元素,直接对数组进行修改,返回含有被删除元素的数组. arrayObject.splice(index,howmany,element1,....., ...
- CF620E New Year Tree 线段树+dfs序+bitset
线段树维护 dfs 序是显然的. 暴力建 60 个线段树太慢,于是用 bitset 优化就好了 ~ code: #include <bits/stdc++.h> #define M 63 ...
- C/C++ -- 判断字符串中存在中文
电脑系统中的英文字符串和中文字符最根本的区别就在于: 1.英文的 ASCII 码,其最高位为 0,占一个字节 注:英文的ASCII码范围是在0到127,二进制为(0000 0000 ~ 0111 11 ...
- leetcode解题报告(23):Pascal's Triangle
描述 Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, R ...
- HDU4254 A Famous Game
luogu嘟嘟嘟 这题刚开始特别容易理解错:直接枚举所有\(n + 1\)种情况,然后算哪一种情况合法,再统计答案. 上述思想的问题就在于我们从已知的结果出发,默认这种每一种情况中取出\(q\)个红球 ...
- python学习:模块(第一节)
1.什么是模块? 如果你从 Python 解释器退出再进入,那么你定义的所有的方法和变量就都消失了.为此 Python 提供了一个办法,把这些定义存放在文件中,为一些脚本或者交互式的解释器实例使用,这 ...
- .vue的文件在vscode里面是白色?
https://cnodejs.org/topic/58b8cac17872ea0864fee2ee 要装一个 vetur的插件
- JAVA基础知识|java虚拟机(JVM)
一.JVM简介 java语言是跨平台的,兼容各种操作系统.实现跨平台的基石就是虚拟机(JVM),虚拟机不是跨平台的,所以不同的操作系统需要安装不同的jdk版本(jre=jvm+类库:jdk=jre+开 ...