如何用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:

這裏只需要寫顯示在二級目錄右邊的相對應的內容即可
到此，大功告成