非常实用的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 相关文章推荐
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
实用的Vue开发技巧
May 30 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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数组
2006/10/09 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python自动化报告的输出用例详解
2018/05/30 Python
python实现转圈打印矩阵
2019/03/02 Python
详解python程序中的多任务
2020/09/16 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
标准单位租车协议书
2014/09/23 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
班主任班级管理心得体会
2016/01/07 职场文书