[vue] 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
			}
		]
	}
]
  1. 跳转(要写完整路径):
   <router-link to="/home/news">News</router-link>

分析代码

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述






Vue-router多级路由(嵌套路由)

Guess you like

Origin blog.csdn.net/qq_14993591/article/details/121316663