详解vue-router 2.0 常用基础知识点之导航钩子


Posted in Javascript onMay 10, 2017

导航钩子

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。

全局钩子

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // do something 
  next();
});

router.afterEach((to, from, next) => {
  console.log(to.path);
});

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

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

方法的调用参数。

  1. next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
  2. next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
  3. 路由对应的地址。
  4. next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next方法,否则钩子就不会被 resolved。

组件内的钩子

let fromPath = '';
export default{
  beforeRouteEnter (to, from, next) {
     // 在渲染该组件的对应路由被 confirm 前调用
     // 不!能!获取组件实例 `this`
     // 因为当钩子执行前,组件实例还没被创建
     fromPath = from.path;
     next();
  },
}

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

Javascript 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
You might like
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
季度思想汇报
2014/01/01 职场文书
员工工作表现评语
2014/04/26 职场文书
教师专业自荐信
2014/05/31 职场文书
同学聚会策划方案
2014/06/06 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
合作意向书范本
2019/04/17 职场文书
2019各种保证书范文
2019/06/24 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python