非常实用的vue导航钩子


Posted in Javascript onMarch 20, 2017

导航钩子

(译者:『导航』表示路由正在发生改变。)

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

全局钩子

你可以使用 router.beforeEach 注册一个全局的 before 钩子:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局的 before 钩子按照创建顺序调用。钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于等待中。

每个钩子方法接收三个参数:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next 方法,否则钩子就不会被 resolved。

同样可以注册一个全局的 after 钩子,不过它不像 before 钩子那样,after 钩子没有next 方法,不能改变导航:

router.afterEach(route => {
 // ...
})

某个路由独享的钩子

你可以在路由配置上直接定义 beforeEnter 钩子:

const router = new VueRouter({
 routes: [
 {
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
  // ...
  }
 }
 ]
})

这些钩子与全局 before 钩子的方法参数是一样的。

组件内的钩子

最后,你可以使用 beforeRouteEnter 和 beforeRouteLeave,在路由组件内直接定义路由导航钩子,

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不!能!获取组件实例 `this`
 // 因为当钩子执行前,组件实例还没被创建
 },
 beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
 }
}

beforeRouteEnter 钩子 不能 访问 this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
 next(vm => {
 // 通过 `vm` 访问组件实例
 })
}

你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。

在做项目的时候,需求是在关闭页面的时候给客户弹出一个框,增加客户停留的时间。 最近看了一下这个钩子,觉得很不错。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
功能强大的php分页函数
2016/07/20 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
下载给定网页上图片的方法
2014/02/18 Python
从零学Python之入门(三)序列
2014/05/25 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python numpy数组转置与轴变换
2019/11/15 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
车间统计员岗位职责
2014/01/05 职场文书
小学家长评语大全
2014/04/16 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
小学教师个人总结
2015/02/05 职场文书
中英文求职信范文
2015/03/19 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
培训计划通知
2015/07/15 职场文书