路由守卫中使用next()跳转到指定路径时会无限循环

路由守卫钩子介绍

const router = new VueRouter({ ... })
// 导航路由变化时触发路由守卫钩子
router.beforeEach((to, from, next) => {// ...
})
  • to: Route:  即将要进入的目标路由对象(到哪去)
  • from: Route: 当前导航正要离开的路由(从哪来)
  • next: Function(必须):  resolve 钩子(学过promise的应该知道),执行效果依赖 next 方法的调用参数,有参和无参数含义不同。(放行到哪)
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (意思就是确认放行)。
    • next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址 (从哪来的回哪里去)
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址(放行到哪个地方)。当前的导航被中断,然后进行一个新的导航(结束当前钩子函数,重新运行钩子函数)。 它允许你传递一个路由对象,其中可以包含更多的配置选项,比如 pathnameparamsquery 等

注意:

next('/') 或者 next({ path: '/' })效果是一样的后者是前者的简写,一般是放行到根路径下(router中可配置根路径)

next({})的参数中国农还可以包含更多的配置选项比如 pathnameparamsquery 等

// 带查询参数
next({ path: '/', query: { userId: 123 } })

// 或者使用命名路由和路由参数
next({ name: 'user', params: { userId: 123 } })

to的path内如果是个 '/'表示之前的路由是根路径或者没有上一个路由。

错误案例

记录造成跳转路径无限循环案例:

举例1:

// 下面的写法会死循环
beforeRoute (to, from, next) {console.log('离开路路由')next('/home')
}// 正确写法
beforeRoute (to, from, next) {console.log('离开路路由')if(to.fullPath==='/home'){next();return;}else{next('/home')
}

解释:

vue-router的next()方法无参和有参时是不一样的

比如当 to.path=/a时,遇到了next("/home")时

会中断当前 to /a 的这当前导航

②将 to.path改为"/home"即(/a 改为 /home)

③此时重新触发钩子函数beforeRouteLeave(从头重新执行)

钩子函数中return作用

router.beforeEach ((to,from,next) => {//将所有需要登陆才显示的页面的路由都放进一个数组const nextRoute = ['index', 'library', 'design', 'administration', 'production'];//获取登陆状态let isLogin = Global.isLoginif(to.name === 'login') {  //如果是登录页,则跳过验证next()  //必不可少return  //以下的代码不执行}if(nextRoute.indexOf(to.name) >= 0) {  //判断该页面是否需要登陆if(!isLogin) {   //判断登陆状态next({ name : 'login'})   //如果未登录,则跳转到登录页} else {next()  //如果已经登陆,那就可以跳转}} else {  //其他的无需登陆的页面不做验证next()}})

这里的return 起的作用:  

首先要知道return 在一个函数中遇到会立刻中断函数执行将return后的内容作为函数的返回值(return后的代码不在执行--这个不解释了很基础)

to.name === 'login'为真时,意味着用户正在尝试访问登录页面。在这种情况下,我们不需要进行任何进一步的检查,因此我们调用next()来继续路由导航,并通过return语句立即结束beforeEach函数的执行。

如果不使用return,代码将会继续执行后续的条件检查,这是不必要的,因为我们已经决定允许用户访问登录页面。即  如果不加return 下面代码还是会执行

if(nextRoute.indexOf(to.name) >= 0) {  //判断该页面是否需要登陆
  // ... 省略了其他代码 ...
}
 

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

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

相关文章

axios使用sm2加密数据后请求参数多了双引号解决方法

axios使用sm2加密数据后请求参数多了双引号解决 背景问题描述解决过程 背景 因项目安全要求,需对传给后端的入参加密,将请求参数加密后再传给后端 前期将axios降低到1.6.7后解决了问题,但最近axios有漏洞,安全要求对版本升级&…

从零开始[进阶版]深入学习图像分类:使用Python和TensorFlow

引言 图像分类是计算机视觉中的一个核心任务,广泛应用于人脸识别、自动驾驶、医疗影像分析等领域。在本篇文章中,我们将深入探讨图像分类的原理和实现,使用Python和TensorFlow搭建一个完整的图像分类系统。本文不仅适合初学者,也…

【Qt 初识 Test】用图形化和代码的方式实现简单的Qt程序

文章目录 1. 通过图形化的方式实现🍎2. 通过代码的方式实现 1. 通过图形化的方式实现🍎 在界面创建出一个控件,显示 hello world,通过拖拽的方式实现; widget.ui文件如下:🔍 生成的 ui_widget.…

生物环保技术有哪些缺点或者局限性呢

生物环保技术,作为一种利用生物学原理和技术来处理环境污染的方法,虽然具有绿色环保、高效节能等优点,但也存在一些缺点和局限性。以下是对这些缺点和局限性的详细分析: 一、受环境因素影响大 生物环保技术的效果往往受到环境因…

数据结构第18节 散列表 - 应用

散列表(Hash Table),也被称为哈希表,是一种数据结构,它通过使用哈希函数将键映射到数组的某个位置来实现快速查找。散列表通常提供平均时间复杂度为O(1)的查找、插入和删除操作,这使得它们在处理大量数据时…

【mybatis】mybatisX插件概述

一、主要功能 智能补全与提示 MyBatisX 可以智能地提示和补全 SQL 语句中的关键字、表名、列名等信息,从而显著提高开发效率。代码生成器 虽然 MyBatisX 本身可能不直接提供一个完整的、独立的代码生成器,但它可能集成了或支持与其他代码生成工具&#…

卤味江湖中,周黑鸭究竟该抓住什么赛点?

近年来,卤味江湖的决斗从未停止。 随着休闲卤味、佐餐卤味等细分赛道逐渐形成,“卤味三巨头”(周黑鸭、绝味食品、煌上煌)的牌桌上有了更多新对手,赛道变挤了,“周黑鸭们”也到了转型关键期。 这个夏天&a…

MySQL字符串相关数据处理函数

目录 1. 转大小写 2. 截取字符串 sunstr 3. 获取字符长度 4. 字符串拼接 concat 5. 去掉空白 trim 1. 转大小写 转大写:upper() 转小写:lower() 虽然MySQL不严格区分大小写,但是我们还是需要掌握这种大小写的操作以方便学习其他…

python的入门知识(下)

目录 学习内容数字字符串、列表和元组映射和集合类型 学习内容 数字 长整型(Long Integer): 在Python中,整数没有大小限制,但是可以用大写或小写的L来表示长整型,尽管这不是Python 3推荐的做法。 复数(Co…

Nessus相关

tenable 1 安装nessus scanner 1 )安装nessus scanner: 方法一 curl -H X-Key: xxxxx https://cloud.tenable.com/install/scanner?namescanner-name&groupsscanner-group | bash方法二: **# for ubuntu, its https://www.tenable.com/downloads/api/v1/pu…

【JavaScript脚本宇宙】JavaScript 库概览:数字、货币值、日期时间处理一网打尽

简化数据处理:掌握六大 JavaScript 库的核心功能和使用技巧 前言 在现代的软件开发中,处理数字、货币和日期时间是非常常见的需求。为了简化这些任务,开发人员可以使用各种 JavaScript 库来轻松地进行数字格式化、货币计算和日期时间操作。…

Google登录时人机身份验证的图片类型和通过的经验建议,以及一些常见问题

很多朋友在登录谷歌账号时,都遇到过要求人机身份验证的步骤,而且有一些时候人机身份验证这个步骤很让人纠结,甚至压根就出不来具体的验证图片,或者花了十几分钟、几十分钟都过不去。 所以今天GG账号服务就来为您解析一下谷歌登录…

初学SpringMVC之接收请求参数及数据回显

pom.xml 文件导入 lombok 的依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version></dependency> Controller 表示这是一个控制器 RequestParam 表示从前端接收…

夏日智启:我的Datawhale AI夏令营探索之旅

前言 最近几年&#xff0c;AI&#xff08;人工智能&#xff09;的发展呈现出了前所未有的迅猛势头&#xff0c;其影响力和应用范围不断扩大&#xff0c;深刻地改变着我们的生活、工作和社会结构。尤其是AI大模型技术&#xff0c;国内外可谓是“百模大战”&#xff0c;百舸争流…

github恢复码怎么备份

https://docs.github.com/zh/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication-recovery-methods

最强文本编辑器 VIM 指令大全

Vim 是从 Vi 编辑器发展出来的一款极其强大的文本编辑器&#xff0c;它保留了 Vi 编辑器的所有功能&#xff0c;并添加了许多新特性。Vim 具有代码补全、语法高亮、错误跳转、批量化处理等编辑功能&#xff0c;还支持异常丰富的插件扩展&#xff0c;且整个编辑全程可通过键盘完…

谷歌插件之一键关闭同域名页面

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 谷歌插件之一键关闭同域名页面 前言项目结构mainfest.jsonbackgroud.js 项目实现效果展示展望 前…

13019.CUDA问题积累

文章目录 1 内存不断增长的问题1.1 主机从GPU拷贝内存1.1.1 htop 内存增长到一定阶段后&#xff0c;保持稳定 1.2 GPU拷贝到Host修改之后内存稳定无变化1.3 结论 2 主机与GPU数据拷贝方案2.1 cudaMemcpy 拷贝内存2.2 cudaMemcpyAsync 异步数据拷贝2.3 采用多线程拷贝技术2.3.1 …

群主必学!轻松Get如何解散微信群的技巧

作为一个微信群的群主&#xff0c;解散群聊可能是你需要掌握的重要技能之一。不管是因为群聊的目的已经达成&#xff0c;还是因为群成员过少或不活跃&#xff0c;了解如何解散微信群都能帮助你更好地管理你的群聊。 如何解散微信群&#xff1f;本文将为您提供一些简单易行的技…

代码随想录算法训练营第五十天| 739. 每日温度、496.下一个更大元素 I、503.下一个更大元素II

739. 每日温度 题目链接&#xff1a; 739. 每日温度 文档讲解&#xff1a;代码随想录 状态&#xff1a;不会 思路&#xff1a; 这道题需要找到下一个更大元素。 使用栈来存储未找到更高温度的下标&#xff0c;那么栈中的下标对应的温度从栈底到栈顶是递减的。这意味着&#xff…