vue——多级路由

最新推荐文章于 2025-03-07 14:53:45 发布

cc_xxo

最新推荐文章于 2025-03-07 14:53:45 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/cc_xxo/article/details/123295389

版权

本文介绍了在Vue.js中设置多级路由的方法，强调配置路由时添加`children`属性，并指出子路由路径不应以'/'开头。访问子路由需逐级书写路径。

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

配置路由时添加children属性在children中配置子路由

routes: [
	{
		path: '/home',
		component: MyHome,
		children: [
			{
				path: 'news',
				component: MyNews
			},
			{
				path: 'message',
				component: MyMessage,
			},
		]
	},
]

注意子路由路径不用写 ‘/’

访问子路由时要一级一级的写

<div>
	<ul class="nav nav-tabs">
		<li>
			<router-link active-class="active" to="/home/news">news</router-link>
		</li>
		<li>
			<router-link active-class="active" to="/home/message">message</router-link>
		</li>
	</ul>
</div>
<router-view></router-view>