vue3之路由导航故障

通常一个导航守卫函数中会发生这四件事之一:
1.通过调用 return false 中断了这次导航
2.通过返回一个新的位置,重定向到其他地方 (例如,return ‘/login’)
3.正常导航到指定路由
4.抛出了一个 Error

检测导航故障

可以使用vue-router提供的一些API来检测导航故障。vue-router为路由导航异常的检测提供了isNavigationFailure函数,这个函数允许你判断一个错误是否来自于导航过程。

import  { isNavigationFailure, NavigationFailureType } from 'vue-router'  // 尝试访问某个页面  
router.push('/some-page').catch(failure => {  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {  // 导航被拦截并返回了false  console.log('Navigation aborted')  } else if (isNavigationFailure(failure, NavigationFailureType.cancelled)) {  // 在导航完成之前又产生了一次新的导航  console.log('Navigation cancelled')  } else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {  // 导航被阻止,已经在目标位置了  console.log('Navigation duplicated')  } else {  // 不是导航故障的错误,可能是其他类型的错误  console.error('Unknown error', failure)  }  
})const navigationResult = await router.push('/my-profile')if (navigationResult) {// 导航被阻止
} else {// 导航成功 (包括重新导航的情况)this.isMenuOpen = false
}

全局导航故障

router.afterEach((to, from, failure) => {if (failure) {sendToAnalytics(to, from, failure)}
})

导航故障的属性

所有的导航失败都会暴露 to 和 from 属性,以反映失败导航的当前位置和目标位置:

// 正在尝试访问 admin 页面
router.push('/admin').then(failure => {if (isNavigationFailure(failure, NavigationFailureType.aborted)) {failure.to.path // '/admin'failure.from.path // '/'}
})

检测重定向

当在导航守卫中返回一个新的位置时,我们会触发一个新的导航,覆盖正在进行的导航。与其他返回值不同的是,重定向不会阻止导航,而是创建一个新的导航。因此,通过读取路由地址中的 redirectedFrom 属性,对其进行不同的检查:

await router.push('/my-profile')
if (router.currentRoute.value.redirectedFrom) {// redirectedFrom 是解析出的路由地址,就像导航守卫中的 to和 from
}

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

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

相关文章

Docker 【通过Dockerfile构建镜像】【docker容器与镜像的关系】

文章目录 前言一、前期的准备工作二、上手构建一个简单的镜像三、DcokerFile1 指令总览2 指令详情 四、Dockerfile文件规范五、docker运行build时发生了什么?六、调试手段1. 修改镜像打包后,如何验证新内容已更新至镜像 七、Dockerfile优化方案 前言 docker构建镜…

JavaEE-文件操作和IO

我们先来认识狭义上的⽂件(file)。针对硬盘这种持久化存储的I/O设备,当我们想要进⾏数据保存时,往往不是保存成⼀个整体,⽽是独⽴成⼀个个的单位进⾏保存,这个独⽴的单位就被抽象成⽂件的概念,就类似办公桌上的⼀份份真…

stm32平衡车

目录 一.所需材料 二.PID算法(简单说明) 直立环 速度环 串级PID 三.使用到的外设 1.定时器输出比较-PWM 2.定时器编码器模式 3.编码器读取速度 4.电机驱动函数 5.外部中断 四、小车 调试 一.所需材料 1.陀螺仪MPU6050--读取三轴的加速度…

隐语笔记2 —— 隐私计算开源如何助力数据要素流通

数据生命周期 数据流转链路主要包括:采集、存储、加工、使用、提供、传输 数据要素外循环是构建数据要素市场的核心 数据外循环中的信任焦虑 三个代表性问题: 不可信内部人员不按约定使用用户隐私泄漏 数据权属问题 解决方案:从主体信任…

设计模式(行为型设计模式——访问者模式)

设计模式(行为型设计模式——访问者模式) 访问者模式 基本定义 将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元素提供多种访…

ALPHA开发板修改CAN的设备树节点信息

一. 简介 上一篇文章通过查看 CAN硬件原理图知道了 CAN1接口对应的IO。文章地址如下: ALPHA开发板中CAN硬件图-CSDN博客 通过ALPHA开发板上的 CAN接口的硬件原理图知道,CAN1_TX 和 CAN1_RX 是 I.MX6ULL的 FlexCAN1 的发送和接收引脚,分别对…

Eureka和Nacos的关系

目录 它们的比较: 结论: Eureka和Nacos都是服务发现和注册中心,它们在微服务架构中扮演着关键角色,但它们是由不同的组织开发的,服务于类似但不完全相同的目的。以下是它们之间的关系: Eureka&#xff1a…

JDK下载配置

一、JDK的作用 Java开发环境:JDK提供了完整的Java开发环境,包含编译器(javac)、解释器(java)、打包工具(jar)、文档生成工具(javadoc)等一系列工具&#xff0…

SpringBoot健康监控

文章目录 1-SpringBoot2-监控-健康监控服务2-SpringBoot2-监控-Admin可视化 在Spring Boot中,可以通过Actuator模块实现应用程序的健康监控。Actuator是Spring Boot提供的一个用于监控和管理应用程序的模块,可以轻松地查看应用程序的运行状况、性能指标和…

Python3条件控制实战

在Python编程中,条件控制是一种重要的编程概念,它允许我们根据条件的成立与否来执行不同的代码块。在本文中,我们将探讨Python3中条件控制的实际运用,并通过示例来演示其用法。 什么是条件控制? 条件控制是编程中的一种结构,它允许根据条件的真假来选择执行不同的代码路…

有什么可以下载网页视频的浏览器插件 浏览器如何下载网页视频 网页视频怎么下载到本地 网页视频下载软件 IDM下载

在视频网站上看电影追剧,已经成为了大众生活中必不可少的一部分。为了保护自家视频的版权,很多平台都禁止用户下载会员视频。其实只要掌握了正确的方法,一样可以将会员视频下载到本地保存。那么有关有什么可以下载网页视频的浏览器&#xff0…

Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现 POM文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.0</version> </dependency> WebSocketConf…

数据库之MongoDB应用与开发

MongoDB应用与开发 1. MongoDB安装 l 官网下载安装介质&#xff1a; Try MongoDB Atlas Products | MongoDB 选择对应版本 修改环境变量 vi /etc/profile export MONGODB_HOME/home/lijin/mongodb export PATH P A T H : PATH: PATH:MONGODB_HOME/bin source /etc/profile …

TnT-LLM: Text Mining at Scale with Large Language Models

TnT-LLM: Text Mining at Scale with Large Language Models 相关链接&#xff1a;arxiv 关键字&#xff1a;Large Language Models (LLMs)、Text Mining、Label Taxonomy、Text Classification、Prompt-based Interface 摘要 文本挖掘是将非结构化文本转换为结构化和有意义的…

矩阵计算-线性系统和 LU 分解

一、三角系统 …… 二、高斯消元法 …… 三、LU分解--直接三角分解法 求解线性方程Axb&#xff1a; 参考视频&#xff1a;【数值分析】矩阵LU三角分解| 速成讲解 考试宝典_哔哩哔哩_bilibili 令ALU&#xff0c;其中L是单位下三角矩阵&#xff08;对角线上元素都是1&#xff…

【python】(08)理解Python中的可变对象和不可变对象

系列文章回顾 【python】(01)初识装饰器Decorator 【python】(02)初识迭代器Iterator 【python】(03)初识生成器Generator 【python】(04)python中实现多任务并发和并行的区别 【python】(05)如何python中的logging模块记录日志信息 【python】(06)理解Python中的 lambda 、map…

golang 轻量数据库推荐

在Go语言&#xff08;Golang&#xff09;生态系统中&#xff0c;有许多轻量级的数据库选项可供选择&#xff0c;这些数据库特别适合用于小型项目、微服务架构或者需要高性能和快速响应的场景。以下是一些推荐的轻量级数据库和库&#xff1a; jmoiron/sqlx: 这是一个轻量级的SQL…

精神暴力的来源与解药

导致人生病的&#xff0c;不仅是病毒或细菌&#xff0c;也有精神暴力。与病毒破坏物理肌体、摧毁生命不同&#xff0c;精神暴力是让人们在过度的自我狂热中燃尽自我、而毁灭自身的。 21世纪以来&#xff0c;精神方面的疾病越来越多&#xff0c;为什么这样呢&#xff1f;大的背景…

git基础-查看提交历史

查看提交历史 在创建了多个提交之后&#xff0c;或者如果克隆了一个具有现有提交历史的存储库&#xff0c;可能会想要回顾一下发生了什么。最基本和强大的工具就是 git log 命令。 运行下git log查看下输出状态 默认情况下&#xff0c;不带任何参数运行 git log 命令会以逆时…

【工具】cassetteai — 制作音乐就像现在写提示一样简单

Cassette 是一种人工智能驱动的音乐创作工具,使各种技能水平的用户都可以根据自己的特定需求和偏好生成高质量、免版税的音乐曲目。它基于基于潜在扩散 (LDM) 的机器学习模型,可以使用用户提供的文本描述来想象节拍。它具有易于使用的界面,用户可以输入各种参数,例如所需的…