vue3 vite动态路由的问题

文章讲述了在VueRouter中遇到的路由匹配问题,由于matchMap中的键名冲突导致to.matched未找到路径。解决方法是检查菜单名称避免重复,并展示了如何使用asyncRouter和loadComponent函数来动态加载和处理路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为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;

}```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值