vue-router 导航钩子的具体使用方法


Posted in Javascript onAugust 31, 2017

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。

全局钩子

1、router.beforeEach 注册一个全局的 before 钩子:

const router = new VueRouter({ ... })

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

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

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

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

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

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

2.afterEach同理,只是不用传入next函数

示例:一个单页面应用,返回首页时,保存其在首页的浏览位置。并且给每一个页面title赋值

const router = new VueRouter({
 base: __dirname,
 routes
});

new Vue({ // eslint-disable-line
 el: '#app',
 render: h => h(App),
 router
});

let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => {
 if (route.path !== '/') {
  indexScrollTop = document.body.scrollTop;
 }
 document.title = route.meta.title || document.title;
 next();
});

router.afterEach(route => {
 if (route.path !== '/') {
  document.body.scrollTop = 0;
 } else {
  Vue.nextTick(() => {
   document.body.scrollTop = indexScrollTop;
  });
 }
})

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

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 #Javascript
Angular2 http jsonp的实例详解
Aug 31 #Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 #Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 #Javascript
基于canvas粒子系统的构建详解
Aug 31 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP实现用户认证及管理完全源码
2007/03/11 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
JavaScript实现简单计算器功能
2019/12/19 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python实时获取cmd的输出
2015/12/13 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
顶撞老师检讨书
2014/02/07 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python