基于vue-admin-template的动态路由的问题解决

news2024/9/29 5:33:18

基于vue-admin-template的动态路由的问题解决

1.问题一:页面无法显示

控制台报如下错误:
在这里插入图片描述
首先经过一番网上搜索,有说是webpack的原因,调试后发现不是,然后再排查后台返回的组件地址。
由于我的前端拼接组件地址的代码如下:

component:item.componentUrl === '#'? Layout: resolve => require([`@/views/${item.componentUrl}/index.vue`], resolve)

查看后台地址,错误原因即后台多加了个/,正确的组件地址为:

在这里插入图片描述
刚开始遇到此类问题时,总以为是前端是不是写法错误,不支持之类的,然而我调试的时候,将动态路由写死进行调试可以正确返回,故思考后台返回组件地址的问题。

问题二 :刷新白屏

参考了一下网上教程,代码如下:

if (isShow) {
			isShow = false; // 第一次进入后修改,使第二次跳转
			// 判断第一次进入路由守卫
			const accessRoutes = await store.dispatch('permission/generateRoutes');
			//更新加载路由
			router.options.routes = store.getters.permission_routes;
			// 动态添加可访问路由
			router.addRoutes(accessRoutes);
			next({ ...to, replace: true });
		} else {
			next();
		}

注意:isShow = false 一定要在next({ …to, replace: true })前面,否则还是白屏,我搞了好久,才发现是这个原因,累了。。。。

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

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

相关文章

使用威胁情报源可为大家提供更好的DDoS防护

DDoS(分布式拒绝服务)攻击已成为各种企业(小到区域性小公司大到各种跨国公司)的主要威胁,DDoS 攻击可能会对企业造成重大损害和破坏,比如对目标公司的声誉产生不利影响并导致收入损失。这也是为什么现在许多…

c++map和set剖析

文章参考文献:cplusplus 博主:拖拉机厂第一代码手 gitee:拖拉机厂第一代码手 c专栏:C 目录 🧙🏼‍♂set剖析🧚🏼set简介🧚🏼set模板参数列表🧚🏼s…

大模型中常用的分词器Tokenizer学习总结记录与代码实现

最近大模型领域内如火如荼,很多企业、个人组织都陆续进入这个领域,笔者最近也是在接触大模型相关的技术领域,本文的主要目的就是想记录总结汇总大模型常用到的分词器算法,总结记录,学习备忘!由于博主本身知…

巨人互动|Google海外户Google Analytics的优缺点是什么?

Google Analytics是一个由谷歌开发的网站分析工具,旨在帮助网站和移动应用程序运营者收集和分析数据,以更好地了解用户行为和改进业务。虽然Google Analytics具有许多优势,但也存在一些缺点。在本文中,我们将探讨Google Analytics…

cuda安装

1.cuda 11.8网址 CUDA Toolkit 11.8 Downloads | NVIDIA Developer 2.安装 sh cuda_11.8.0_520.61.05_linux.run 直接accept 移动上下到driver上,再enter一下取消driver的更新 更新一下.bashrc,cp -r ~/.bashrc xxx export PATH/usr/local/cuda-11.…

慢慢来,这次一定能搞懂Promise

1.Promise到底是个什么东西? 让我们使用万能console打印一下它的内容。 根据控制控制台的输出可见Promise 是一个构造函数,本身身上有 all、reject、resolve 这几个方法,原型(prototype)上有 then、catch 等方法。 根…

JVM源码剖析之Java命令行参数全解

最近,有一位网友询问关于Java命令行参数方面的问题,因为在Java中参数有很多种,有不少的读者一直没弄明白,所以特意写下此篇文章。 此篇文章分2大块,第一块是不同参数的解释,第2块就是JVM源码论证&#xff…

理解 Python 的 for 循环

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 在本篇博客中,我们将讨论 Python 中 for 循环的原理。 我们将从一组基本例子和它的语法开始,还将讨论与 for 循环关联的 else 代码块的用处。 然后我们将介绍迭代对象、迭代器和迭代器协议&…

低代码平台——减少开发bug,解放程序员

目录 一、前言 二、低代码提供了哪些功能 三、低代码对程序员的好处 四、小结 一、前言 在计算机语言的世界里,一直存在着一个千奇百怪的生物——bug。bug产生的本质是因为写代码,于是一种真理就诞生了。真理如下:只要写代码,就会…

【多维定向滤波器组和表面波】表面变换:用于高效表示多维 s 的多分辨率变换(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

信创麒麟操作系统卸载docker,并分别用在线、yum、rpm三种方式安装信创的docker

备注:操作前建议对机器打快照备份,或者备份好数据,如未使用,第一次部署的情况可直接操作 一、卸载DataEase自带的docker # 停止服务 service dataease stop# 删除 docker 可执行文件 rm -f /usr/bin/containerd-shim-runc-v2 r…

快速解决IDEA中类的图标变成J,不是C的情况

有时候导入新的项目后,会出现如下情况,类的图标变成J,如图: 直接上解决方法: 找到项目的pom.xml,右键,在靠近最下方的位置找到Add as Maven Project,点击即可。 此时,一般类的图标就…

【springboot项目】在idea中启动报错合集

一、IDEA中报错 “Error running ‘Application‘: Command line is too long.“ 的解决办法 报错详情: Error running Application: Command line is too long.Shorten command line for Application or also for Spring Boot default configuration.报错原因&am…

校对软件助力公安公检:提高调查报告质量

校对软件可以为公安公检机关提供有力支持,帮助提高调查报告的质量。以下是校对软件在这方面的助力: 1.拼写和语法检查:校对软件可以自动检查调查报告中的拼写错误和语法问题。这可以避免由于疏忽或拼写错误而导致的报告不准确或难以理解的情况…

TENNECO EDI 项目——X12与XML之间的转换

近期为了帮助广大用户更好地使用 EDI 系统,我们根据以往的项目实施经验,将成熟的 EDI 项目进行开源。用户安装好知行之桥EDI系统之后,只需要下载我们整理好的示例代码,并放置在知行之桥指定的工作区中,即可开始使用。 …

java Spring Boot yml多环境配置

我们项目 线上和线下 环境配置不是特别一样 例如 运行的URL 数据库地址 数据库的账号密码 这些经常是不一样的 如果每次上线钱改 也不是特别方便 甚至可能忘记 那么 进入我们代码中 所谓的多环境 就是在不同的环境下配置不同的值 终端还是在application配置文件中 多环境的话…

【网络编程】万字详解||一个简单TCP服务器(TCP、线程池、守护进程)源码+介绍

TCP服务器 锁:Lock.hpp代码介绍 守护进程:daemonize.hpp代码说明 日志文件:log.hpp代码说明 任务处理 Task.hpp代码说明 线程池 ThreadPool.hpp代码说明 客户端 TCPClient.cc代码说明 服务器 TCPServer.cc代码说明 头文件包 util.hpp代码 Mak…

【工程实践】使用Roformer-sim(SimBERTv2 )做数据增强

前言 此文仅记录以Roformer-sim为基础模型做数据增强的过程,Roformer-sim模型细节请移步:SimBERTv2来了!融合检索和生成的RoFormer-Sim模型 - 科学空间|Scientific Spaces https://github.com/ZhuiyiTechnology/roformer-sim 1.功能介绍 可以…

[LeetCode - Python]344.反转字符串(Easy);345. 反转字符串中的元音字母(Easy);977. 有序数组的平方(Easy)

1.题目 344.反转字符串(Easy) 1.代码 class Solution:def reverseString(self, s: List[str]) -> None:"""Do not return anything, modify s in-place instead."""# 双指针left,right 0, len(s)-1while left < right:temp s[left]s[…

利用PCL实现点云配准

一、介绍 This document demonstrates using the Iterative Closest Point algorithm in your code which can determine if one PointCloud is just a rigid transformation of another by minimizing the distances between the points of two pointclouds and rigidly tran…