VueRouter导航守卫用法详解


Posted in Javascript onDecember 25, 2017

简介

主要用来通过跳转或取消的方式守卫导航。

例如判断登录信息:没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。

分为三大类:全局守卫、路由守卫、组件守卫

全局守卫

beforeEach
beforeResolve
afterEach

路由守卫

beforeEnter

组件守卫

beforeRouteEnter
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不!能!获取组件实例 `this`
  // 因为当守卫执行前,组件实例还没被创建
  虽然无法直接获取组件实力
  但是我们可以通过next参数的回调函数获取到当前实例进行操作
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      //vm就是当前组件实例
    });
  }
beforeRouteUpdate
  // 在当前路由改变,但是该组件被复用时调用
  // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
  // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
beforeRouteLeave
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`

参数介绍

这些导航守卫涉及到的参数:to、from、next

除了全局守卫的afterEach只有to和from外其余都有三个参数

(摘抄自官网)
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
  next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

运行机制

VueRouter导航守卫用法详解

以上就是本次给大家介绍的关于VueRouter导航守卫的全部知识,希望我们整理的内容对你有用,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
屏蔽相应键盘按钮操作
Mar 10 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
微信小程序实现弹出层效果
May 26 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 #Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
You might like
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
基本DOM节点操作
2017/01/17 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python urllib3软件包的使用说明
2020/11/18 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
Linux文件系统类型
2012/02/15 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
班级体育活动总结
2014/07/05 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
团队拓展训练心得体会
2016/01/12 职场文书