vue-router使用笔记_router 三级-CSDN博客

本文链接：https://blog.csdn.net/qq_44670001/article/details/112178293

这篇博客主要记录了Vue-router在设置三级路由时的注意事项，包括如何配置默认子路由和在路由守卫中正确进行页面跳转。作者提到了一个常见错误，即在子路由中重定向导致的问题，并提供了修正后的代码示例。

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

路由用法案例笔记

三级路由
路由守卫中使用router进行跳转
…

1.三级路由

const routes = [
	// 一级路由
	{   										
		path: '',
		redirect: 'wrapper',						<<==进入页面后就重定向到wrapper
	},
	{
		path: '/wrapper',							
		name: 'Wrapper',
		component: () => import('@/views/wrapper.vue'),  <<==提供承载二级路由的模板【也就是父路由】
		redirect: 'wrapper/home',						 <<==在父路由中重定向到二级路由
		//二级路由
		children: [
			{
				path: 'home',
				name: 'Home',
				component: () => import('@/components/home.vue'), 	<<==提供承载三级路由的模板
				redirect: 'home/default',				 			<<==在二级路由中重定向到三级路由
				//三级路由
				children: [
					{
						path: 'default',
						name: 'Default',
						component: () => import('@/components/default.vue'),
					},
				],
			},
			{
				path: 'category/:id',
				name: 'Category',
				component: () => import('@/components/category.vue'),
			},
			{
				path: 'cart',
				name: 'Cart',
				component: () => import('@/components/cart.vue'),
			},
			{
				path: 'my',
				name: 'My',
				component: () => import('@/components/my.vue'),
			},
		],
	},
]

总结:

当一个路由有子级路由时需要提供一个默认组件作为载体(父路由组件)
然后在父路由中使用redirect跳转到默认的子级路由【路径格式为: 父路由/子路由】

曾经是使用【在子路由里重定向的方式结果出问题了】:
代码:

{ path: '',		redirect: '/a'},
{ path: '/a',	 name:'A',		component: ()=>import('@/components/a.vue'),	children: [
	{path: '',		redirect: 'b'},    <<== 
	{ path: 'b',	 name:'B',		component: ()=>import('@/components/b.vue'),	children: [
		{path: '',		redirect: 'c'},		<<==
		{ path: 'c',	 name:'C',		component: ()=>import('@/components/c.vue'),	children: [
			{path: '',		redirect: 'c'},		<<==
			
		]},
	]},
]},

这里只是警告但是页面出不来

[vue-router] Named Route 'Home' has a default child route. 
When navigating to this named route (:to="{name: 'Home'"),
the default child route will not be rendered. 
Remove the name from this route and use the name of the default child route for named links instead.