如何用vue做一个二级联动

如何做一个像这样二级联动的目录？
先来说说重点和思路：重点在于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:

注意这里又来了一个router-view，与上面的不同，这里用来显示右边的内容。
重点来了！开始写我们的router.js，配置vue-router。

我把整个页面命名为mine（我的），在main.vue中编写了头像、用户名等账户信息以及使用Tabs编写了一级目录（活动、通知、设置），注意到我的vue-router中main页面的默认显示为/mine/minePost，接着是mine页面的children的编写，即活动activity、通知message、个人设置setting，这三个组件只需要编写剩下的一级目录以下的内容了，在avtivity和message中又嵌套着children，并设置了默认路径，嵌套在children里的组件会在父组件的router-view中显示，各组件代码如下
mine.vue:

注意到mine.vue中tabPane中使用的三个router-view实际是同个区域
activity.vue:

message.vue:

minePost.vue:

这里只需要写显示在二级目录右边的相对应的内容即可
到此，大功告成