嵌套路由配置路由规则，使用children配置项：

routes:[
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', 
				component:News
			},
			{
				path:'/message',
				component:Message
			}
		]
	}
]

区别:
不带 / （推荐）:
当 home的子路由 news 在定义 path 路径时没有在路径前书写 / , 那么在home跳转至 news时, 以$router.push方法为例, 在书写跳转地址时需要与父级路由地址一同书写, 如下 :

$router.push('/home/news')

浏览器地址栏显示: http:xxxxxxxxxx/home/news ;

带 / :
home 的子路由 message 定义 path 路径时书写了 / , 那么在 home 跳转至message时, 同样以$router.push方法为例, 只需书写 message 自身的 path 定义的路由地址, 如下:

$router.push('/message')

浏览器地址栏显示: http:xxxxxxxxxx/message.

原文链接：https://blog.csdn.net/m0_59128154/article/details/119426919