vue3 vue-router 导航守卫 (五)

在Vue 3中,导航守卫仍然是一个重要的概念,用于在路由切换时执行一些特定的逻辑。Vue Router提供了多个导航守卫,包括全局守卫、路由独享守卫和组件内守卫。可以在路由切换时执行一些特定的逻辑,例如身份验证、权限控制、数据加载等帮助你更好地控制整个应用程序的导航流程。

文章目录

  • 一、全局前置守卫
  • 二、路由独享守卫
  • 三、全局后置守卫
  • 四、组件内守卫
  • 五、案例

一、全局前置守卫

全局前置守卫会在路由切换之前被调用,并且在所有路由切换中都会被触发

router.beforeEach((to, from, next) => {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换
})

二、路由独享守卫

你也可以为特定的路由定义守卫

const routes = [{path: '/example',component: ExampleComponent,beforeEnter: (to, from, next) => {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换}}
]

三、全局后置守卫

全局后置守卫会在路由切换之后被调用,并且在所有路由切换中都会被触发

router.afterEach((to, from) => {// 在这里执行你的逻辑
})

四、组件内守卫

组件内守卫是针对特定组件的守卫,组件内守卫有3个

注意:beforeRouteEnter在setup语法糖中是无法使用的,需要再起一个script标签 使用defineComponent方式来使用

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({beforeRouteEnter(to, from, next) {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换},beforeRouteUpdate(to, from, next) {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换},beforeRouteLeave(to, from, next) {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换}
});
</script><script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
</script>

五、案例

下面是一个简单的案例,当我们线上考试时,若通过更改浏览器网址到其他地方而没有到交卷页则提醒你正在考试,是否放弃考试。这个时候我们就可以使用组件内守卫来进行逻辑处理。当然,下面的案例只是提供一个简单的组件内守卫适用场景,代码比较粗糙,具体还需要根据项目情况来处理。

<script setup lang="ts">
import { useRoute,useRouter } from "vue-router";
const router = useRouter();const back = async()=>{try {await this.$confirm("你正在考试,是否放弃考试", "确认信息", {distinguishCancelAndClose: true,confirmButtonText: "确定",});try {// await this.toTestResult(true)} catch (e) {router.push({ name: "Home" });}} catch (e) {return false;}}
</script><script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({beforeRouteEnter(to, from, next) {//没有跳到交卷页面提醒if (to.path != "result") {back();} else {next();}},beforeRouteUpdate(to, from, next) {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换},beforeRouteLeave(to, from, next) {// 在这里执行你的逻辑// 通过调用next()来继续路由切换,或者调用next(false)取消路由切换},});
</script>

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

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

相关文章

C++STL详解+代码分析+典例讲解

vector 的介绍&#xff1a; 1、vector是表示可变大小数组的序列容器。 2、vector就像数组一样&#xff0c;也采用的连续空间来存储元素&#xff0c;这也意味着可以采用下标对vector的元素进行访问。 3、vector与普通数组不同的是&#xff0c;vector的大小是可以动态改变的。 4、…

基于物联网的智能仓管理系统方案

基于物联网的智能仓管理系统方案 一、项目背景 随着企业业务的快速发展&#xff0c;传统的人工仓库管理方式已经无法满足现代企业的需求。仓库运营效率低下、货物出入库错误、库存不准确等问题不断涌现。因此&#xff0c;我们提出一个基于物联网技术的智能仓管理系统方案&…

Redis 五大经典业务问题

一 缓存穿透 缓存穿透是指当请求的数据既不在缓存中也不存在于数据库中时&#xff0c;请求会直接穿透缓存层&#xff0c;到达数据库层。这通常是由于恶意攻击或者程序错误造成的&#xff0c;比如攻击者故意请求不存在的大量数据&#xff0c;导致缓存不命中&#xff0c;所有的请…

智能优化算法应用:基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.被囊群算法4.实验参数设定5.算法结果6.参考文…

Moco框架的搭建使用

一、前言   之前一直听mock&#xff0c;也大致了解mock的作用&#xff0c;但没有具体去了解过如何用工具或框架实现mock&#xff0c;以及也没有考虑过落实mock&#xff0c;因为在实际的工作中&#xff0c;很少会考虑用mock。最近在学java&#xff0c;刚好了解到moco框架是用于…

城市基础设施智慧路灯改造的特点

智慧城市建设稳步有序推进。作为智慧城市的基础设施&#xff0c;智能照明是智慧城市的重要组成部分&#xff0c;而叁仟智慧路灯是智慧城市理念下的新产品。随着物联网和智能控制技术的飞速发展&#xff0c;路灯被赋予了新的任务和角色。除了使道路照明智能化和节能化外&#xf…

安全扫描五项简介

目录 安扫五项 1.代码检测 2.主机基线 nginx合规检查 麒麟基线 3.WEB扫描 4.渗透测试 用户枚举漏洞 漏洞描述 修复建议 点击劫持漏洞 漏洞描述 修复建议 XSS漏洞 漏洞描述 修复建议 3.主机漏洞 超高危漏洞 高危漏洞 中危漏洞 低危漏洞 信息漏洞 参考信息…

用电商API接口获取拼多多的商品详情数据

pinduoduo.item_get_app_pro-根据ID取商品详情原数据 公共参数 API请求地址 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_searc…

一步一步写线程之一简单的开始

一、多线程 多线程不管是在前面的文章分析中还是在网上还是大书籍上&#xff0c;学习C/C多线程编程是无法绕过的&#xff0c;即使使用别人封装好的框架&#xff0c;包括使用STL的一些库&#xff0c;如果仅仅是简单的应用&#xff0c;可能也就过去了。不过&#xff0c;稍微复杂…

VBA_MF系列技术资料1-237

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…

[Linux] 用LNMP网站框架搭建论坛

一、nginx在其中工作原理 原理&#xff1a; php-fpm.conf是控制php-fpm守护进程 它是php.ini是一个php解析器 工作过程&#xff1a; 1.当客户端通过域名请求访问时&#xff0c;Nginx会找到对应的虚拟主机 2. Nginx将确定请求。 对于静态请求&#xff0c;Nginx会自行处理…

结构体和位段

结构体&#xff1a; C语言中&#xff0c;我们之前使用的都是C语言中内置的类型&#xff0c;比如整形&#xff08;int&#xff09;、字符型&#xff08;char&#xff09;、单精度浮点型&#xff08;float&#xff09;等。但是我们知道&#xff0c;我们现实世界中&#xff0c;还…

聊聊spring.mvc.servlet.load-on-startup

序 本文主要研究一下spring.mvc.servlet.load-on-startup spring.mvc.servlet.load-on-startup org/springframework/boot/autoconfigure/web/servlet/WebMvcProperties.java ConfigurationProperties(prefix "spring.mvc") public class WebMvcProperties {//.…

json精讲

本文介绍json的规范及javascript和java对数据的交换读取 1. json介绍1.1 json简介1.2为什么使用 JSON&#xff1f; 2. json规范2.1基础规范2.2 key值为-字符串、数字、布尔值2.3 key值为对象Object2.4 key值为数组2.5 json本身就是一个数组 3.javascript操作json3.1 javascript…

WPF(Windows Presentation Foundation) 的 Menu控件

WPF&#xff08;Windows Presentation Foundation&#xff09;的 Menu 是一种用于创建菜单的控件。菜单通常位于应用程序窗口的顶部&#xff0c;并提供了一组命令或选项&#xff0c;用于导航到不同的功能区域、执行特定的操作或访问特定的功能。 Menu 控件是 WPF 中的一个容器…

2、关于使用ajax验证绕过(实例2)

ajax原理我上一篇有写过&#xff0c;参考&#xff1a;1、关于前端js-ajax绕过-CSDN博客 一、实例环境&#xff1a; 为手机上的某一割韭菜app 二、目的&#xff1a; 实现绕过手机验证码&#xff0c;找回密码 三、工具&#xff1a; bp代理 四、验证步骤如下&#xff1a; …

ECU安全学习网站和书籍介绍

ECU安全是指关注和保护汽车电子控制单元&#xff08;ECU&#xff09;的安全性和防护措施。ECU是现代汽车中的关键组件&#xff0c;它负责监控和控制车辆各种系统的运行&#xff0c;如发动机、制动、转向等。ECU安全的重要性在于防止恶意攻击者操控或干扰车辆的操作。 ECU安全涉…

hive自定义函数及案例

一.自定义函数 1.Hive自带了一些函数&#xff0c;比如&#xff1a;max/min等&#xff0c;但是数量有限&#xff0c;自己可以通过自定义UDF来方便的扩展。 2.当Hive提供的内置函数无法满足你的业务处理需要时&#xff0c;此时就可以考虑使用用户自定义函数。 3.根据用户自定义…

GitHub为Rust语言添加了供应链安全工具

GitHub的供应链安全特性包括咨询数据库、Dependabot警报和依赖关系图现在可以用于Rust Cargo文件。 为了帮助Rust开发人员发现和防止安全漏洞&#xff0c;GitHub已经为快速增长的Rust语言提供了供应链安全特性套件。 这些特性包括GitHub Advisory Database&#xff0c;它已经有…

构建外卖系统:使用Django框架

在当今数字化的时代&#xff0c;外卖系统的搭建不再是什么复杂的任务。通过使用Django框架&#xff0c;我们可以迅速建立一个强大、灵活且易于扩展的外卖系统。本文将演示如何使用Django构建一个简单的外卖系统&#xff0c;并包含一些基本的技术代码。 步骤一&#xff1a;安装…