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
}
相关文章:
vue3之路由导航故障
通常一个导航守卫函数中会发生这四件事之一: 1.通过调用 return false 中断了这次导航 2.通过返回一个新的位置,重定向到其他地方 (例如,return ‘/login’) 3.正常导航到指定路由 4.抛出了一个 Error 检测导航故障 可以使用vue-router提供的…...
Dr4g0n
信息收集 # nmap -sn 192.168.56.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-03-04 08:52 CST Nmap scan report for 192.168.56.2 Host is up (0.00012s latency). MAC Address: 00:50:56:FE:B1:6F (VMware) Nmap scan report …...
蓝桥杯每日一题:扫雷
题目来源:第十三届蓝桥杯软件赛省赛 B组 在一个 n n n 行 m m m 列 的方格图中有些位置有地雷, 另外一些位置为空 请为每个空位置标一个整数, 表示周围八个相邻的方格中有多少个地雷 输入 : 输入的第一行包含两个整数 n n n , m m m 第 2 行 到 第 n 1 n 1 n…...
net core API 后台系统操作日志的实现思路
net core API 后台系统操作日志的实现思路 系统操作日志的实现思路主要问题不在于写日志和表结构设计上。 主要问题在识别出哪些数据做了修改。并生成日志。 表中数据列众多,且要监控多个表。如果要监控的每个表都去写代码去监控和转换这样的工作量就会比较大。 如,用户表…...
ORACLE 知识整理
目录 一. 插入指定数量的数据二. 索引2.1 创建索引2.2 删除索引 三. 查询计划四. Oracle SQLPlus常用设置五. 增加删除字段 一. 插入指定数量的数据 ⏹当需要向表中插入若干测试数据的时候,可通过下面这种方式造数据 先从DUAL虚拟表中检索后造出10000条数据后&…...
业务服务:redisson
文章目录 前言一、配置1. 添加依赖2. 配置文件/类3. 注入redission3. 封装工具类 二、应用1. RedisUtils工具类的基本使用 三、队列1. 工具类2. 普通队列3. 有界队列(限制数据量)4. 延迟队列(延迟获取数据)5. 优先队列(…...
面试算法-100-零钱兑换
题目 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的数量是无限的…...
【Leetcode每日一题】 动态规划 - 使用最小花费爬楼梯(难度⭐)(41)
1. 题目解析 题目链接:746. 使用最小花费爬楼梯 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 一、设定状态表 为了解决这个问题,我们首先要明确一个“状态表”。这个状态表其实就是一个记录…...
Springboot旅游管理系统设计与实现
** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目,希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅** 一、研究背景…...
c++学习笔记(10)
1. 二分答案是一种常用的算法思想,用于解决一些需要枚举所有可能答案的问题。它的基本思想是将问题的答案范围缩小到一半,然后根据一定的条件判断,再将答案范围缩小到一半,直到找到正确的答案或者确定不存在正确答案为止。 下面…...
Visual Studio - 添加快捷键图标
Visual Studio - 添加快捷键图标 1. Text Editor Toolbar Options -> Add or Remove Buttons -> Customize2. Toolbars3. Commands -> Debug4. Add Command...References 1. Text Editor Toolbar Options -> Add or Remove Buttons -> Customize 2. Toolbars B…...
突破边界:Web3开启数字化社会的新纪元
引言 随着科技的不断进步和数字化社会的发展,Web3正逐渐成为了人们关注的焦点。作为新一代互联网的演进形态,Web3具有突破传统边界、实现去中心化的特点,被认为将开启数字化社会的新纪元。本文将深入探讨Web3的概念、特点、应用场景…...
docker仓库登录及配置insecure-registries的方法
docker仓库登录及配置insecure-registries的方法 这篇文章主要介绍了docker仓库登录配置insecure-registries的方法,docker客户端如果配置中添加了insecure-registary配置,就不需要在docker 客户端配置上对应证书,如果不配置要在/etc/docker/certs.d/目…...
Lambda函数与Selenium WebDriverWait类一起使用
Lambda函数是一种匿名函数,也称为内联函数或者lambda表达式。它们在Python中用于创建简短的、一次性的函数。Lambda函数通常用于在代码中传递函数作为参数,或者在需要一个简单的函数,但不想正式定义一个函数的情况下使用。 Lambda函数的特点…...
V R元宇宙平台的未来方向|V R主题馆加 盟|游戏体验馆
未来,VR元宇宙平台可能会呈现出以下发展趋势和可能性: 全面融合现实与虚拟世界: VR元宇宙平台将更加无缝地融合现实世界和虚拟世界,用户可以在虚拟环境中进行各种活动,与现实世界进行互动,并且体验到更加逼…...
sox命令用法
play input.wav 播放音频 sox input.wav -n stat 查看音频文件信息 soxi input.wav 查看音频文件信息input sox input.wav -n stat -v 不失真最大调整量 sox -v 0.8 input.wav output.wav 调整音量0.8,(大于1为扩大,小于1为缩小) sox *.wav *…...
Android kotlin全局悬浮窗全屏功能和锁屏页面全屏悬浮窗功能二
1.前言 在进行app应用开发中,在实现某些功能中要求实现悬浮窗功能,分为应用内悬浮窗 ,全局悬浮窗和 锁屏页面悬浮窗功能 等,接下来就来实现这些悬浮窗全屏功能,首选看下第二部分功能实现 2.kotlin实现锁屏页面悬浮窗全屏功能二分析 悬浮窗是属于Android系统的一种浮动窗…...
[数据结构]二叉树与递归OJ
上回我们手撕了一棵二叉树,并且通过递归完成了遍历,这回我们将深入理解用递归解决相关的二叉树问题,数量使用分治的思想. 上回的代码: #include<stdio.h> #include<stdlib.h> typedef struct BinTreeNode {struct BinTreeNode* left;struct BinTreeNode* right;i…...
vue iframe实现父页面实时调用子页面方法和内容,已解决
父页面标签添加鼠标按下事件 父页方法中建立iframe通信 实时调用子页面方法 实时更改子页面文本内容...
Spring Cloud Gateway教程
1 微服务网关概述 Spring Cloud Gateway是在 Spring 生态系统之上构建的API网关服务,旨在为微服务架构应用提供一种简单有效的统一的API路由管理方式。 Spring Cloud Gateway主要功能: 反向代理认证鉴权流量控制熔断日志监控 2 Spring Cloud Gateway三…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
flow_controllers
关键点: 流控制器类型: 同步(Sync):发布操作会阻塞,直到数据被确认发送。异步(Async):发布操作非阻塞,数据发送由后台线程处理。纯同步(PureSync…...
