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 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
JavaScript 异步时序问题
Nov 20 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操作Memcache实例介绍
2013/06/14 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php单一接口的实现方法
2015/06/20 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
jQuery 技巧小结
2010/04/02 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
浅述python中argsort()函数的实例用法
2017/03/30 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python重试装饰器的简单实现方法
2019/01/31 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
小班教师个人总结
2015/02/05 职场文书
未婚证明范本
2015/06/15 职场文书
2015年度女工工作总结
2015/10/22 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python