vue-router导航钩子
Vue路由中的导航钩子,可以用来拦截导航,让它完成跳转。
全局导航钩子
当一个导航触发时,全局的 before 钩子按照创建顺序调用。钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于 等待中
//定义一个路由
const router = new VueRouter({ ... }) // 点击导航前调用
router.beforeEach((to, from, next) => {
// ...
})
// 点击导航后调用
router.afterEach(route => {
// ...
})
每个钩子方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
确保要调用 next 方法,否则钩子就不会被 resolved
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航
组件内的钩子
在路由组件内直接定义路由导航钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter
钩子不能访问this,
beforeRouteLeave钩子
可以直接访问this
//(因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建)
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数
单个路由独享的钩子
beforeEnter
可以在路由配置上直接定义 beforeEnter 钩子
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
},
beforeEnter: (route) => {
// ...
}
}
]
});
转自:https://blog.csdn.net/itpinpai/article/details/76475975
vue-router导航钩子的更多相关文章
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- Vue的路由Router之导航钩子和元数据及匹配
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- 【11】vue router 之导航钩子
导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...
- Vue Router的导航解析过程
在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- vue 导航钩子
导航钩子 (译者:『导航』表示路由正在发生改变.) 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
- [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 ...
- 【转】vue中的钩子函数。。
前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子 ...
随机推荐
- Luogu P4643 【模板】动态dp(矩阵乘法,线段树,树链剖分)
题面 给定一棵 \(n\) 个点的树,点带点权. 有 \(m\) 次操作,每次操作给定 \(x,y\) ,表示修改点 \(x\) 的权值为 \(y\) . 你需要在每次操作之后求出这棵树的最大权独立集 ...
- AWS免费EC2
终于弄到这个EC2了.回想下过程大概如下 1.注册账号 https://amazonaws-china.com/cn/free/ 可以这地址点击"创建免费账户" 2.注册填写信息, ...
- HR_Array Manipulation
第一版有7个时间超限,优化成了第二版: 1: #!/bin/python3 import math import os import random import re import sys # Com ...
- springboot之docker启动参数传递
这几天有网友问,如何在使用docker的情况下传递spring.profiles.active=test,也就是说springboot切换配置文件.以往我们直接通过java启动jar的时候,直接跟上- ...
- 【转】服务化框架技术选型与京东JSF解密
[京东技术]声明:本文转载自微信公众号“开涛的博客”,转载务必声明. 作者:章耿,原京东资深架构师,曾负责京东服务框架,配置中心等基础平台.近十年工作经验,专注于基础中间件等底层技术架构,对分布式系统 ...
- Git中撤销提交
Git的几种状态 未修改 原始内容 已修改 ↓ 工 作 区 已暂存 ↓ git add 暂 存 区 已提交 ↓ git commit 本地仓库 已推送 ↓ git push 远程仓库 注意:下面所有命 ...
- 洛谷P2486 染色
LCT的一种姿势. 题意:给定一棵树.每次把一条路径上的点染成一种颜色,求一条路径上有多少段颜色. 解: 首先可以很轻易的用树剖解决,只不过代码量让人望而却步... 有一种难以想象的LCT做法... ...
- JavaScript深入之从原型到原型链
构造函数创建对象 我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'Kevin'; cons ...
- hdu4899 Hero meet devil
题目链接 题意 给出一个长度字符串\(T\),其中只包含四种字符\((A,C,G,T)\),需要找一个字符串\(S\),使得\(S\)的长度为\(m\),问\(S\)和\(T\)的\(lcs\)为\( ...
- CF1129D Isolation(分块+DP)
一个很显然的DP方程式:f[i]=Σf[j],其中j<i且在[j+1,i]中出现1次的数不超过k个 乍一看挺神仙的,只会O(n^2),就是对于每个位置从后向前扫一遍,边扫边统计出现1次的数的个数 ...