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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
js严格模式总结(分享)
Aug 22 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
基于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源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php中final关键字用法分析
2016/12/07 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
如何运行Python程序的方法
2013/04/21 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python基础教程项目三之万能的XML
2018/04/02 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python基于百度云文字识别API
2018/12/13 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
十一个高级MySql面试题
2014/10/06 面试题
民生工程实施方案
2014/03/22 职场文书
毕业典礼致辞
2015/07/29 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书