问[Vue]routerview标签渲染子路由失败？

提问于 2022-04-11 11:09:30

回答 0关注 0查看 221

最近在做毕业设计，为了争取一下优秀毕业论文选择了尝试 SpringBoot + Vue3 边学边做前后端分离，果不其然很多困扰

一、问题综述

通过接收后端提供的菜单项来动态加载路由与菜单栏，并动态挂载组件

理应出现：点击左侧子菜单项，主页的<router-view>标签渲染对应组件

实际却是：点击左侧子菜单项，却打开了一个新的标签页显示组件

二、我的排查

（一）会不会是路由格式有问题？【无误】

（二）会不会是动态添加路由时，子路由和父路由的添加方式需要特殊处理？查看了一下vue3的添加路由方法【我单方面认为无误】

export const doFormat=function(unFormatRoutes, parentName, router){
	let rtnFmtRoutes = [];							//格式化后的，用于返回的路由数组	
	unFormatRoutes.forEach(route => {				//这一步相当于在数组中遍历生成一个route对象，并且给他们注册属性
		if(route.name == '所有'){
			return
		}
		let{										//	对应key-value地接收后端JSON中的菜单
			path,
			component,
			name,
			meta,
			enabled,
			icon,
			children
		} = route
		if(children && children instanceof Array){	//如果当前的route对象有子菜单，则子菜单递归格式化
			component: () => import('@/views/HomeViewExample.vue'); //临时给一个组件，后面会变
			router.addRoute(route);
			children = doFormat(children, name, router);
		}
		
		var myComponent = () => require('../components/user/UserList.vue') //正式的组件，不过先写死，方便排错
		
		let fmtRoute={
			path: path,								//子路由如果想实现router-view的渲染，必须抹除第一个“/”
			name: name,
			icon: icon,
			meta: meta,
			hidden: !enabled,
			children: children,
			component: myComponent
		}
		
		rtnFmtRoutes.push(fmtRoute)
		if(!parentName){
			router.addRoute(fmtRoute)				//父路由
		}else{
			router.addRoute(parentName,fmtRoute)	//子路由
		}
	})
	return rtnFmtRoutes;
}

（三）尝试了一下如果写死的子路由能否渲染到<router-view>【事实证明可以】

{
  	path: '/',
  	name: 'home',
  	component: HomeView2,
  	hidden: false,
	children: [
		{
			path: 'test1',
			name: 'Test1',
			component: Test1,
			hidden: false
		},
		{
			path: '/user/test',
			name: 'usertest',
			component: UserTest,
			hidden: false,
			meta: {},
			children: []
		}
	]
  }