详解Vue-router嵌套路由

步骤

1.配置路由规则,使用children配置项:

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写:/news
				component:News
			},
			{
				path:'message',//此处一定不要写:/message
				component:Message
			}
		]
	}
]

2.跳转(要写完整路径):

   News

分析代码

详解Vue-router嵌套路由_第1张图片

详解Vue-router嵌套路由_第2张图片

详解Vue-router嵌套路由_第3张图片

详解Vue-router嵌套路由_第4张图片

详解Vue-router嵌套路由_第5张图片

详解Vue-router嵌套路由_第6张图片

详解Vue-router嵌套路由_第7张图片

详解Vue-router嵌套路由_第8张图片

详解Vue-router嵌套路由_第9张图片

详解Vue-router嵌套路由_第10张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的:(详解Vue-router嵌套路由)