非常实用的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分页控件 可用于无刷新分页
Jul 23 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
详解vue中移动端自适应方案
May 05 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
JS实现音乐导航特效
Jan 06 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动态生成静态HTML网页的代码
2010/03/04 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
5 cool javascript apps
2007/03/24 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
JavaScript字符串检索字符的方法
2017/06/23 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
Seajs源码详解分析
2019/04/02 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
如何用Python合并lmdb文件
2018/07/02 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
基于python实现从尾到头打印链表
2019/11/02 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
员工薪酬激励方案
2014/06/13 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang