vue router 配置都对了,没报任何错,但就是没有显示出来

181 阅读1分钟

起因

今天遇到一个看起来很奇特的问题,实际上确是忽略了最基本的问题

看看问题是这样的,配置文件:

[
	{
		  path: "/base_data_system",
		  name: "base_data_system",
		  component: () => import("../pages/MenuHome/menu"),
		  children: [
			{
			  path: "event",
			  name: "event",
			  meta: { name: "事件数据管理" },
			  component: () =>
				import("../pages/BasicDataHost/EventDataManagement/IndexAction")
			},
			{
			  path: "parts",
			  name: "parts",
			  meta: {   },
			  children: [
				{
				  path: "list",
				  name: "list",
				  meta: { name: "部件数据管理" },
				  component: () =>
					  import("../pages/BasicDataHost/Parts/PartsList/IndexAction")
				},
				{
				  path: "check",
				  name: "check",
				  meta: { name: "部件审核" },
				  component: () =>
					  import("../pages/BasicDataHost/Parts/WaitCheck/IndexAction")
				}
			  ]
			},
		]
	}
]

这是一个4层的路由,访问路径为:/base_data_system/event/parts/list

看起来没任何问题,但就一直显示不出来,没有任何错误,直接蒙了

image.png

解决

又去翻一翻官方文档,网上找一下资料,总算想起了

image.png

删掉一个组件,问题在于少了一个<router-view />

总结

问题在于vue 路由如果路径是嵌套的,则需要<router-view />也要嵌套,如果少了一个,没有任何错误提示,所以对于发现路由问题,首先确认是不是 <router-view /> 没有