详解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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript