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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JS排序之快速排序详解
Apr 08 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
微信小程序实现animation动画
Jan 26 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
浅谈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
文章推荐系统(三)
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
学习python类方法与对象方法
2016/03/15 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python实现处理mysql结果输出方式
2020/04/09 Python
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
init进程的作用
2012/04/12 面试题
《火烧云》教学反思
2014/04/12 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
python 离散点图画法的实现
2022/04/01 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers