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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
js闭包用法实例详解
Dec 13 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
Vue-cli3多页面配置详解
Mar 22 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
tagName的使用,留一笔
2006/06/26 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
基于python的汉字转GBK码实现代码
2012/02/19 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
C语言编程题
2015/03/09 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
过滤器的用法
2013/10/08 面试题
企业承诺书格式
2014/05/21 职场文书
成本会计岗位职责
2015/02/03 职场文书
退休职工欢送会致辞
2015/08/01 职场文书