详解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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
xml转json的js代码
Aug 28 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
详解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执行定时任务的实现思路
2015/12/21 PHP
PHP实现的策略模式示例
2019/03/20 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JavaScript字符串对象
2017/01/14 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python将unicode转为str的方法
2017/06/21 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python实现图片添加文字
2019/11/26 Python
python 画函数曲线示例
2019/12/04 Python
如何卸载python插件
2020/07/08 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
岗位职责的构建方法
2014/02/01 职场文书
药品营销策划方案
2014/06/15 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python