addroutes和next()导致的页面无法跳转问题,如登录之后无法跳转到首页,无法重定向,使用next(to)

版本 vue router 3

问题说明

登录成功后,想重定向到/index,执行router.push之后进入beforeEach
由于第一次访问,判断用户信息为空,需要异步拉取用户的权限等信息,
获得响应后,使用addRoutes批量添加路由信息,然后执行next()放行。

但是,页面没有跳转首页,无任何反应
控制台打印日志,没有发现问题:
在这里插入图片描述

问题分析

首先,/index路由是在本地添加的静态路由,所以总是能匹配到结果,和添加的动态路由没有关系,所以问题不是路由匹配失败导致的(路由匹配不到,应该显示白屏才对)

查看vue router源码,发现除了添加路由,下面还有一个if判断,修改了目标页面

src/index.js:addRoutes (routes: Array<RouteConfig>) {this.matcher.addRoutes(routes)if (this.history.current !== START) {this.history.transitionTo(this.history.getCurrentLocation())}}
}

我们当前处于/login登录页面,无法跳转,所以history.current/loginSTART被定义为/
两者肯定是不相等的,于是会执行transitionTo(this.history.getCurrentLocation()),也就是路由目标被改成了当前页面,那我们就还是处在登录界面,而不是首页

问题解决

addRoutes后,不要使用next(),使用next(to),即手动的再次跳转到目标页面。
不过要注意,next(to)会再次进入beforeEach路由守卫,我们要设置判断逻辑,如果路由信息已经存在,就不再执行addRoutes,直接next()放行,才能跳转。不然会一直next(to),循环进入beforEach

同时,我们不希望之后每次刷新同一个页面,都重复插入相同的路由历史记录,可以加一个选项replace: true,使用替换模式来替换最新一条相同历史记录

if(路由信息已添加){// 直接放行next()
}
else{//添加动态路由信息addRoutes(xxx)// 手动跳转next({ ...to, replace: true })
}

参考资料https://mosuzi.com/docs/tech/vue-router-add-route-blocks-next/index.html

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

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

相关文章

harbor部署+docker-compose

harbor部署 harbor介绍 Harbor 是一个开源的企业级容器镜像仓库&#xff0c;用于存储和分发 Docker 镜像及其他容器格式的镜像。 Harbor 提供了一个集中化的存储库&#xff0c;方便团队成员共享和管理容器镜像。你可以将构建好的镜像推送到 Harbor 仓库中&#xff0c;其他成…

用python启动nacos和redis

import subprocess import tkinter as tk from tkinter import ttk, messagebox from subprocess import Popen, run, PIPE# 启动Nacos的函数 def start_nacos():startup_cmd_path rD:\environment\code-software\nacos-server-1.4.1\nacos\bin\startup.cmd# 异步启动NacosPop…

Python 和 PyCharm 安装(傻瓜式)

为什么要安装Python&#xff1f; 当我们写 python 代码的时候&#xff0c;需要有环境的支持&#xff0c;才可以运行代码。而 python 的安装支持了两个主要部分&#xff0c;分别是解释器和标准库。当我们安装完成&#xff0c;就可以使用python里面的标准库来写代码&#xff0c;而…

Nginx - 反向代理、缓存详解

概述 本篇博客对配置Nginx的第二篇&#xff0c;主要介绍Nginx设置反向代理、缓存、和负载均衡三个知识点&#xff0c;在之前的生产实践中遇到的问题进行归纳和总结&#xff0c;分享出来&#xff0c;以方便同学们有更好的成长。 Nginx 核心参数配置 在写Nginx反向代理时&…

Kafka的Offset(偏移量)详解

Kafka的Offset详解 1、生产者Offset2、消费者Offset2.1、消费者2.2、生产者2.3、实体类对象2.4、JSON工具类2.5、项目配置文件2.6、测试类2.7、测试2.8、总结 1、生产者Offset 2、消费者Offset 2.1、消费者 package com.power.consumer;import org.apache.kafka.clients.consu…

nexus 清理 docker 镜像

下载配置 nexus-cli 看网上文档都用如下地址&#xff0c;但现在已经不能下载&#xff1a; wget https://s3.eu-west-2.amazonaws.com/nexus-cli/1.0.0-beta/linux/nexus-cli chmod x nexus-cli 在 github 上下载&#xff1a; wget https://github.com/heyonggs/nexus-cli/r…

跟李沐学AI:转置卷积

定义 卷积不会增大输入的高宽&#xff0c;通常卷积层后高宽不变或减半。转置卷积则可以用来增大输入的宽高。 转置卷积是一种卷积&#xff0c;它将输入和核进行了重新排列&#xff0c;通常用作上采用。 如果卷积将输入从变为&#xff0c;同样超参数的情况下&#xff0c;转置…

Java中三大容器类(List、Set、Map)详解

三大容器介绍 名称结构特点常见实现类List&#xff08;列表&#xff09;由有序的元素序列组成&#xff0c;可以包含重复元素可以通过索引访问元素&#xff0c;插入的顺序与遍历顺序一致ArrayList、LinkedList、VectorMap&#xff08;映射&#xff09;由键值对(Key-Value)组成的…

SpringBoot项目中mybatis执行sql很慢的排查改造过程(Interceptor插件、fetchSize、隐式转换等)

刚入职公司&#xff0c;就发现公司项目跑sql特别慢&#xff0c;差不多一万条数据插入到数据库要5秒以上&#xff08;没有听错&#xff0c;就是这个速度&#xff09;&#xff0c;查询修改删除也是特别慢。直到22年年底实在是受不了了&#xff0c;我就去排查了一下。 用的是Oracl…

OpenCV小练习:身份证号码识别

目标&#xff1a;针对一张身份证照片&#xff0c;把身份证号码识别出来&#xff08;转成数字或字符串&#xff09;。 实现思路&#xff1a;需要将目标拆分成两个子任务&#xff1a;(1) 把身份证号码区域从整张图片中检测/裁剪出来&#xff1b;(2) 将图片中的数字转化成文字。第…

Ubuntu 22.04上稳定安装与配置搜狗输入法详细教程

摘要&#xff1a;本教程详细介绍了如何在Ubuntu 22.04上安装和配置搜狗输入法&#xff0c;每个步骤详细配图。由于在Ubuntu 24.04上存在兼容性问题&#xff0c;建议用户继续使用稳定的22.04版本。教程涵盖了从更新系统源、安装fcitx输入法框架&#xff0c;到下载和配置搜狗输入…

存储实验:基于华为存储实现存储双活(HyperMetro特性)

目录 什么是存储双活仲裁机制 实验需求实验拓扑实验环境实验步骤1. 双活存储存储初始化&#xff08;OceanStor v3 模拟器&#xff09;1.1开机&#xff0c;设置密码1.2登录DM&#xff0c;修改设备名、系统时间和导入License1.3 设置接口IP 2. 仲裁服务器配置&#xff08;Centos7…

全局点云配准的新思考:没有良好初值时如何配准?

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 1.论文信息 论文标题&#xff1a;BiEquiFormer: Bi-Equivariant Representations for Global Point Cloud Registration 作者&#xff1a;Stefanos Pertigkiozoglou*, Evangelos Chatzipantazis∗ and K…

【循环顺序队的实现】

1.队列的逻辑结构 与 抽象数据类型定义 先进先出的线性表 在顺序队列中&#xff0c;我们使用头指针front指向队首元素&#xff1b;用尾指针rear指向队尾元素的下一个位置&#xff08;当然这里的指针是用下标模拟出来的&#xff09; 同时顺序队列中的元素当然是用数组来存储的 …

解决STM32使用J-Link可以擦除和读取但是无法烧录问题

现象 使用J-Link烧录模组固件&#xff0c;出现可以读取和擦除&#xff0c;但是无法烧录问题&#xff0c;提示错误如下&#xff1a; ERROR: Programming failed address 0x08000080 (program error)End of flash programmingERROR: Program failed 读出来的时候这个地址数据…

Linux 软件包管理器yum 自动化构建工具-make/makefile

Linux 工具 linux 软件包管理器 yum 把一些常用的软件提前编译好&#xff0c;做成软件包放在一个服务器上&#xff0c;通过包管理器可以很方便的获取到在这个编译好的软件包。直接进行安装。 软件包和软件包管理器就相当于 App 和应用商店这样的关系。 Linux 安装软件 源代码…

poe供电原理以及应用

1,根据IEEE802.3af标准,一个完整的PoE系统包括供电端设备PSE和受电端设备PD两部分; 供电设备PSE是整个系统的电源提供者,为PD设备提供直流电源,其可分为M

如何理解进程

一、进程的概念 进程&#xff1a;顾名思义&#xff0c;就是一个完整执行程序的过程。没错&#xff0c;就是这么简单&#xff0c;但是在程序执行的过程之中&#xff0c;系统会为这个执行的程序分配内存资源&#xff0c;这些过程也包含在进程当中。 进程是动态的&#xff0c;是程…

【网络编程通关之路】 Tcp 基础回显服务器(Java实现)及保姆式知识原理详解 ! ! !

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Linux下IO多路复用—select,poll,epoll

一.概述 1.IO多路复用介绍 IO多路复用是一种操作系统的技术&#xff0c;用于在单个线程或进程中管理多个输入输出操作。它的主要目的是通过将多个IO操作合并到一个系统调用中来提高系统的性能和资源利用率&#xff0c;避免了传统的多线程或多进程模型中因为阻塞IO而导致的资源…