本文介绍了如何利用Vue和vue-router构建一个二级联动导航。通过在main.vue中使用Tabs组件和嵌套的router-view，配合router.js的配置，实现一级导航（活动、通知、设置）与二级导航（如活动中的帖子、回复等）的联动效果。每个一级目录下，通过children配置二级路由，并在对应的组件中展示内容。
如何做一个像这样二级联动的目录？
先来说说重点和思路：重点在于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:
如何用vue做一个二级联动
最新推荐文章于 2024-05-16 16:38:03 发布
最低0.47元/天 解锁文章
扫一扫
2666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
