如何用vue做一个二级联动

本文介绍了如何利用Vue和vue-router构建一个二级联动导航。通过在main.vue中使用Tabs组件和嵌套的router-view,配合router.js的配置,实现一级导航(活动、通知、设置)与二级导航(如活动中的帖子、回复等)的联动效果。每个一级目录下,通过children配置二级路由,并在对应的组件中展示内容。

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

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
如何做一个像这样二级联动的目录?
先来说说重点和思路:重点在于router-view的使用以及vue-router的配置,思路是两层children的嵌套。
下面开始实现功能。
翻开我们的vue工程的,写好我们相应的组件,包括:
一级:活动activity、通知message、设置setting;
二级:活动中的:帖子minePost、回复mineReply等;
   通知中的:回应mReply等;
   设置只有一个,默认为setting
现在来看看我们的文件列表。
在这里插入图片描述
要实现这样的功能,我们要用好router-view。
我的一级导航用的是Tabs。
main.vue:
在这里插入图片描述
把router-view嵌套在TabPane中,注意这里的三个router-view是同一个,用来显示一级导航栏下方的内容,包括二级导航栏和内容。
接着是二级导航,用的是Menu,举个例子。
activity.vue:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值