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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
js实现简易计算器功能
Oct 18 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP中的self关键字详解
2019/06/23 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
javascript自执行函数
2017/02/10 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
给孩子的新年寄语
2014/04/08 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2016年记者节感言
2015/12/08 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js