Vue Router 5个导航守卫(详解)

文章目录

  • 导航守卫
    • 全局前置守卫
    • 全局解析守卫
    • 全局后置钩子
    • 路由独享的守卫
    • 组件内的守卫
  • 完整的导航解析流程


导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航
注意:参数或查询的改变并不会触发进入/离开的导航守卫,你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局前置守卫

使用 router.beforeEach 注册一个全局前置守卫

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

  • to:: 即将要进入的目标 路由对象
  • from: 当前导航正要离开的路由
  • next:
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错

用户未能验证身份时重定向到 /login 的示例:

// BAD
router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })// 如果用户未能验证身份,则 `next` 会被调用两次next()
})
// GOOD
router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

router.beforeResolve((to, from, next) => { } )

全局后置钩子

全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {// ...
})

路由独享的守卫

在路由配置上直接定义 beforeEnter 守卫

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})

守卫与全局前置守卫的方法参数是一样的

组件内的守卫

在路由组件内直接定义以下路由导航守卫:

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave
const Foo = { termplate: `....`,beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建}beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}}

beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdatebeforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。

beforeRouteUpdate (to, from, next) {// just use `this`this.name = to.params.namenext()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消

beforeRouteLeave (to, from, next) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (answer) {next()} else {next(false)}
}

完整的导航解析流程

  • 导航被触发。
  • 在失活的组件里调用 beforeRouteLeave 守卫。
  • 调用全局的 beforeEach 守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 在路由配置里调用 beforeEnter。
  • 解析异步路由组件。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫 (2.5+)。
  • 导航被确认。
  • 调用全局的 afterEach 钩子。
  • 触发 DOM 更新。
  • 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html+css+js编程入门----使用TitanIDE制作可切换主题的简单网页

在学习编程的时候,最重要的就是直接动手尝试,从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤,手把手带你制作一个简易的网站,让你了解 HTML、CSS 和 JS 之间的关系与基本操作: 当我们从建筑的角度来理…

Unity学习笔记 - 第一个Hello World都算不上的项目

一、Unity安装 这里不细说安装了,首先需要Visual Studio,然后要安装Unity Hub,Unity Hub就像一个管理平台,安装完它之后,可以在它的界面上选择安装各个版本的编辑器。 开始您的创意项目并下载 Unity Hub | Unity通过 …

lv17 CGI移植 5-1

简介 CGIC是一个支持CGI开发的开放源码的标准C库,可以免费使用,只需要在开发的站点和程序文档中有个公开声明即可,表明程序使用了CGIC库,用户也可以购买商业授权而无需公开声明。 CGIC能够提供以下功能: 分析数据&a…

【第十二篇】使用BurpSuite实现CSRF(实战案例)

CSRF存在前提:简单的身份验证只能保证请求是发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的 业务场景:新增、删除、收藏、编辑、保存使用Burp发现CSRF漏洞的过程如下。 1、如图,存在修改邮箱的功能点如下: 2、修改邮箱的流量包,此时邮箱已被修改: 思路:是…

【云开发笔记NO.26】CHDFS

由于这是腾讯云学习笔记,所以很多技术,都是腾讯云的。 由腾讯云的课程,加上查询资料,整理而来。 CHDFS,即腾讯云分布式文件系统(Tencent Hybrid Distributed File System),是腾讯云…

C++---linux运行

C–linux运行 1. 在linux下使用gcc/g编译多个.h .c 文件 main.cpp : #include <iostream> #include <myhead.h> using namespace std; int main(){//fun_head();cout<<"in main"<<endl;int x100;int y200;cout<<"sum : "…

【leetcode】将x减到0的最小操作数/水果成篮/找到字符串中所有字母异位词{史上最容易懂的解析}

文章目录 1.将x减到0的最小操作数2.水果成篮3.找到字符串中所有字母异位词 1.将x减到0的最小操作数 分析题目 x不断地减去数组两端的值 看能否减到0&#xff1b;是不是就是在问&#xff1a;nums数组中存不存在【左端右端】组成的连续区间&#xff0c;区间上数的和为x 继续分析 …

【三十七】【算法分析与设计】STL 练习,凌波微步,栈和排序,吐泡泡,[HNOI2003]操作系统,优先队列自定义类型

凌波微步 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1 秒&#xff0c;其他语言 2 秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言 65536K 64bit IO Format: %lld 题目描述 小 Z 的体型实在是太胖了&…

小程序如何通过公众号发送新订单提醒

当客户在小程序上下单后&#xff0c;公众号会发送订单通知&#xff0c;这可以让管理员及时获知用户下单情况&#xff0c;方便及时处理订单和提供服务。下面是具体介绍如何设置公众号来发送订单服务通知。 方式一&#xff1a;通过采云公众号发送订单通知 此种方式是默认的通知…

vulhub打靶记录——Corrosion2

文章目录 主机发现端口扫描ssh—22search openssh EXP web服务—8080目录扫描登录tomcat后台 提权切换用户查看用户权限寻找SUID命令破解登录密文 总结 主机发现 使用nmap扫描局域网内存活的主机&#xff0c;命令如下&#xff1a; nmap -sP 192.168.151.0/24192.168.151.1&am…

投资回报率ROI是什么意思?

投资回报率&#xff08;Return on Investment&#xff09;是判断公司经营活动中所使用的资本带来的真实利润高低的指标&#xff0c;它涵盖了企业的获利目标。 名词解释 投资回报率 Return on Investment 是判断公司经营活动中所使用的资本带来的真实利润高低的指标&#xff0…

真实对比kimi、通义千问、文心一言的写代码能力,到底谁强?

&#x1f916;AI改变生活&#xff1a;最近都在说月之暗面的kimi的各项能力吊打国内其他大模型&#xff0c;今天我们真实感受下 kimi、通义千问、文心一言的根据需求写代码的能力。 测评结果让人震惊&#xff01; kimi kimi编程过程 我们先看一下热捧的月之暗面的kimi模型。 …

谷歌(Google)技术面试概述

概述 谷歌&#xff08;Google&#xff09;技术面试非常困难而且富有挑战性。想要获得电话面试&#xff0c;你需要将简历提交到他们的在线申请系统或者通过内部员工进行推荐。 假设你通过了简历审阅&#xff0c;招聘人员会联系你。通常情况下会有两次电话面试&#xff0c;如果…

【PyQt5篇】和子线程进行通信

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;和子线程进行通信&#x1f388;运行结果 &#x1f354;使用QtDesigner进行设计 我们首先使用QtDesigner设计界面 得到代码login.ui <?xml version"1.0" encoding"UTF-8"?> <ui …

Win10 桌面上应用程序的图标快捷键失效都变成白色图标 怎么修复?

环境&#xff1a; Win10 专业版 问题描述&#xff1a; Win10 桌面上应用程序的图标快捷键失效都变成白色图标 怎么修复 解决方案&#xff1a; 1.资源管理器&#xff0c;把“隐藏的项目”的打钩去掉,打开隐藏文件 2.在文件资源管理器的地址栏输入%localappdata%快速访问这…

C顺序表:通讯录

目录 前言 通讯录数据结构 通讯录初始化 查找名字 增加联系人 删除联系人 展示所有联系人 查找联系人 修改信息 销毁通讯录 完整通讯录代码 前言 数据结构中的顺序表如果已经学会了&#xff0c;那么我们就可以基于顺序表来完成一个通讯录了 通讯录其实我们使用前…

Coding and Paper Letter(八十八)

系列重启之CPL。 1 Coding: 1.一个Python库用来分析城市路网的工具箱&#xff0c;城市形态分析工具。 Madina 2.SkyPilot&#xff1a;在任何云上运行 LLM、AI 和 Batch。 通过简单的界面即可实现最大程度的节省性能、最高的 GPU 可用性和托管执行。 skypilot 3.探索美国卫…

creo扫描杯子学习笔记

creo扫描杯子学习笔记 扫描2要素&#xff1a; 轨迹&#xff0c; 截面。 多用于曲线扫描&#xff0c;区别于拉伸命令。 大小自定 旋转扫描 抽壳 草绘把手 扫描把手 复制曲面 实例化切除 成型

NOI - OpenJudge - 2.5基本算法之搜索 - 2753:走迷宫 - 超级无敌详细题解(含多个不同算法AC代码)

点赞关注吧~ 2753:走迷宫 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kB 描述 一个迷宫由R行C列格子组成&#xff0c;有的格子里有障碍物&#xff0c;不能走&#xff1b;有的格子是空地&#xff0c;可以走。 给定一个迷宫&#xff0c;求从左上角走到右下角最…

08 | Swoole 源码分析之 Timer 定时器模块

原文首发链接&#xff1a;Swoole 源码分析之 Timer 定时器模块 大家好&#xff0c;我是码农先森。 引言 Swoole 中的毫秒精度的定时器。底层基于 epoll_wait 和 setitimer 实现&#xff0c;数据结构使用最小堆&#xff0c;可支持添加大量定时器。 在同步 IO 进程中使用 seti…