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 相关文章推荐
document.all与WEB标准
May 13 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
使用express来代理服务的方法
Jun 21 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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解答方法
2012/02/04 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python 生成器协程运算实例
2017/09/04 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Django框架模板介绍
2019/01/15 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
详解python 中in 的 用法
2019/12/12 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
军训自我鉴定200字
2014/02/13 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
优秀大学生自荐信
2015/03/26 职场文书
创业计划书之服装
2019/10/07 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
JavaScript实现队列结构过程
2021/12/06 Javascript