vue3 vite动态路由的问题

news2024/9/20 5:28:22

因为to.matched未配到路由导致,

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/basedata/psiIntialCustomer/add"

加下面的代码,是解决不了问题,因为它只是转向了404页面。

const routes_404 = {
	path: "/:pathMatch(.*)*",
	hidden: true,
	component: () => import('@/layout/other/404.vue'),
}

客户期初余额新增、编辑无法跳转,但是最有一个供应商期初余额却可以,甚是奇怪。
1
今天调试发现tomatch为空,是因为matchMap中key有相同的名字。菜单名称不重复,问题就解决了。
1
下面是动态路由的主要代码,这里不要用eager,因为那个是同步的。很多地方会出错。因此按照下方编写即可。

// 加载所有得页面
const modules = import.meta.glob('@/views/**/*.vue');

//转换
function filterAsyncRouter(routerMap) {
	const accessedRouters = []
	routerMap.forEach(item => {
		item.meta = item.meta?item.meta:{};
		//处理外部链接特殊路由
		if(item.meta.type=='iframe'){
			item.meta.url = item.path;
			item.path = `/i/${item.name}`;
		}
		//MAP转路由对象
		var route = {
			path: item.url,
			name: item.name,
			meta: item.meta,
			redirect: item.redirect,
			children: item.children ? filterAsyncRouter(item.children) : null,
			component: loadComponent(item.url)
		}
		accessedRouters.push(route)
	})
	return accessedRouters
}
function loadComponent(component){
	let res;
	if (component){
		for (const path in modules) {
			const dir = path.split('views')[1].split('.vue')[0];
			if (dir.indexOf(component)>-1) {
				res = () => modules[path]();
				break;
			}
		}
	} else{
		res =() => import(`@/layout/other/empty.vue`)
	}
    return res;

}```

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

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

相关文章

Vmare安装Centos8系统

vmare虚拟机Centos8系统安装 之前虚拟机已经安装好了,现在开始尝试在虚拟机里面安装系统,这次使用Centos8进行安装。 前提条件: 虚拟机安装完成 Centos8系统镜像下载完成 网上资源很多,如果没有也可以私信我。 本篇文章全程图片资…

ChatGPT对话为什么不用WebSocket而使用EventSource?

文章目录 1. 引言2. WebSocket和EventSource简介2.1 WebSocket2.2 EventSource 3. ChatGPT对话系统的特点4. EventSource的优势4.1 简单易用4.2 容错性强4.3 兼容性良好 5. 为何选择EventSource而非WebSocket?5.1 单向通信模式5.2 长轮询模式5.3 简化部署和维护 6. …

后端接受List类型参数报错:Cannot deserialize instance of `java.util.ArrayList` out of START_OBJECT token

今天和前端调接口时报了"Cannot deserialize instance of java.util.ArrayList out of START_OBJECT token"错误 其实我想要的是这种类型的参数 但是前端传的是这种类型 前端传过来的更像是一个对象而不是一个列表,我们后端不能直接接受它 报错时后端的…

CSS特效030:日蚀动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS…

郝斌C语言自学教程笔记

赫斌C语言——笔记目录 c语言编程预备知识流程控制函数变量指针结构体位运算符 前段时间康哥看我C语言基础不牢,推荐我学习郝斌老师的C语言课程,花2周看完之后发现确实是目前所看的C语言课程中最好的,不仅非常适合入门,而且对即使学了几年C语…

痤疮分割 实验心路历程

数据集的制作 将labelme生成的标注文件记普通的json文件转成coco数据集格式的json文件 图像分辨率过大 如果不做任何调整: 会出现“killed”的报错,表示图片像素过大,显卡内存不够,无法支撑训练 显卡 换成更高性能的显卡&am…

配置VRRP负载分担示例

一、组网需求: HostA和HostC通过Switch双归属到SwitchA和SwitchB。为减轻SwitchA上数据流量的承载压力,HostA以SwitchA为默认网关接入Internet,SwitchB作为备份网关;HostC以SwitchB为默认网关接入Internet,SwitchA作为…

快速入门Tailwind CSS:从零开始构建现代化界面

快速入门Tailwind CSS:从零开始构建现代化界面 介绍 Tailwind CSS 是一个以原子类的方式快速构建界面的 CSS 框架。它提供了丰富的预定义类,使得开发者能够快速构建样式和布局。 安装和设置 首先,我们需要在项目中安装 Tailwind CSS。可以…

经典深度学习算法【1】:K-近邻算法(KNN)概述

最简单最初级的分类器是将全部的训练数据所对应的类别都记录下来,当测试对象的属性和某个训练对象的属性完全匹配时,便可以对其进行分类。但是怎么可能所有测试对象都会找到与之完全匹配的训练对象呢,其次就是存在一个测试对象同时与多个训练…

【Java】线程池的创建

目录 ​编辑 一、什么是线程池 二、创建和使用 导入必要的包: 创建线程池: 提交任务给线程池执行: 自定义Runnable和Callable任务: 关闭线程池: 我的其他博客 一、什么是线程池 在Java中,线程池是…

phpy 连接 PHP与Python生态 跨界合作 PHPY搭建 已解决

目录 需求介绍 安装 windows版本 文件地址 运行效果 需求介绍 在日常功能开发中,难免会使用python的计算库,同时自己要是一名PHP开发工程师。就在最近有相应的需求,索性使用phpy来进行功能开发 安装 windows版本 phpy 是识沃团队最新推出…

系列三、DDL

一、DDL 1.1、概述 DDL是英文单词Data Definition Language的缩写,中文意思为数据定义语言,是用来定义数据库对象(数据库,表,字段)的。 1.2、数据库操作 1.2.1、查询所有数据库 show databases; 1.2.2、创建数据库 # 语法 cre…

TrustZone之安全虚拟化

在Armv7-A首次引入虚拟化时,它仅在非安全状态中添加。在Armv8.3之前,Armv8也是如此,如下图所示: 如前所述在切换安全状态时,EL3用于托管固件和安全监视器。安全EL0/1托管受信任的执行环境(TEE),由受信任的服务和内核组成。 在安全状态下,没有对多个虚拟机的需…

IntelliJ IDEA无公网环境远程访问Linux服务器进行开发

文章目录 1. 检查Linux SSH服务2. 本地连接测试3. Linux 安装Cpolar4. 创建远程连接公网地址5. 公网远程连接测试6. 固定连接公网地址7. 固定地址连接测试 本文主要介绍如何在IDEA中设置远程连接服务器开发环境,并结合Cpolar内网穿透工具实现无公网远程连接&#xf…

01-进程和线程的概述

进程和线程的相关概念 概述 进程是一个运行中的应用程序,一个进程是一个执行中的软件 每打开一个软件就相当于启动了一个进程 , 操作系统就会为该进程分配一个内存空间, 进程A和进程B的内存独立不共享 线程是由进程创建的,一个进程可以启动多个线程,线程是一个进程中的执行…

AI 在智能制造:推动创新与效率的提升

AI在智能制造中的应用,正在不断推动着智能制造的发展,为制造业带来巨大的创新和变革。 随着AI科技的不断创新发展,人工智能(AI)在许多领域都取得了显著的进步,其中之一就是智能制造。智能制造是指通过集成…

Vue3-17-ref 模板引用的基本使用

什么是模板引用 简单来说,就是在 js 代码中 获取到 html 中的dom元素的完整信息, 从而实现直接操作dom元素的效果。模板引用的语法 1、给 dom 元素添加 ref名称 属性,指定一个独有的名称; 2、js 中 声明一个 与 dom 元素的 ref 同…

Linux--fork创建子进程详解

目录 一.初识fork函数 二.fork的返回值 三.fork原理 1.fork是如何创建子进程的? 2.为什么fork会有两个返回值? 3.为什么父进程的返回值是子进程的pid,子进程返回值是0? 4.fork之后,父子进程谁先运行?…

SpringBoot2初始入门

适配器 任务调度 父项目、webstarter、bulid 版本管理 自动配置 Spring、SpringMVC 扫描包:主程序及其子包 底层注解: Configuration、Bean 单实例 proxyBeanMethodstrue,组件依赖 Import Conditioal(name"")条件…

访问修饰符

1.java提供四种访问控制修饰符号,用于控制方法和属性(成员变量)的访问权限(范围)。 1.公开级别:用public修饰,对外公开 2.受保护级别:用protected修饰,对子类和同一个包中的类公开 3.默认级别:没用修饰符,向同一个包的类公开 4.私有级别:用private修饰,只有本类可以访问,不…