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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
vue组件实现文字居中对齐的方法
Aug 23 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
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
建立动态的WML站点(三)
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
python发送邮件实例分享
2017/07/28 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
初中家长评语和期望
2014/12/26 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
大学生志愿者心得体会
2016/01/15 职场文书