一、問題

對于剛用 vue 框架寫這種項目的新手來說會弄不清項目結(jié)構(gòu)要怎么弄才能讓路由條理足夠清晰。因為最近碰到有人問我這個問題，便整理一下，希望能幫到剛接觸的人。有過大型網(wǎng)站項目經(jīng)驗的人請忽略此文。

二、項目結(jié)構(gòu)：

1、網(wǎng)站

下面以思維導(dǎo)圖的形式展現(xiàn)目錄結(jié)構(gòu)

網(wǎng)站結(jié)構(gòu)

2、結(jié)構(gòu)說明及需求

網(wǎng)站結(jié)構(gòu)如圖所示，下面會舉例說明

注意：B 中的 a 和 C 中的 a 不是同一個頁面

• 網(wǎng)站包含A、B、C、D 四個模塊
• 其中 A 模塊沒有子模塊，類似網(wǎng)站首頁，沒有二級頁面
• B 模塊有 a、b、c、d 四個子模塊，其中默認(rèn)顯示 B 下的 a 模塊
  • a 模塊存在 b、c、d 三個模塊的入口，但 b、c、d 沒有互相跳轉(zhuǎn)的入口（導(dǎo)航欄的二級下拉框中沒有 a 的入口，因為點擊 B 本身就顯示的是 a 模塊）

可以把 B 想象成多功能模塊，如 B 為「音樂排行榜」，默認(rèn)顯示 a，a 包含 b（新聲榜）、c（說唱榜）、d（古典音樂榜）等等。不清楚可見如下網(wǎng)易月音樂的《全球榜》

音樂榜單

• C 模塊有 a、b、c 三個模塊，點擊 C 默認(rèn)顯示 a 模塊，a、b、c 可互相跳轉(zhuǎn)，且頁面都有各自入口（C 沒有二級下拉菜單）

可以把 C 想成登錄成功后的「個人中心」，a（個人資料）、b（密碼管理）、c（我的收藏）等

• D 模塊可以跳轉(zhuǎn)到 C 模塊

C 模塊若為「個人中心」，那么 D 模塊就是「登錄」模塊，所以 C 和 D 只顯示一個，未登錄顯示 D，登錄成功后顯示 C

三、代碼項目結(jié)構(gòu)

項目結(jié)構(gòu)以思維導(dǎo)圖為例，項目結(jié)構(gòu)如圖所示：

項目結(jié)構(gòu)

四、路由配置

路由配置以思維導(dǎo)圖為例，配置如圖所示：

路由配置

五、注意事項

上面的代碼結(jié)構(gòu)和路由配置中都有入口文件 index.vue，其中主要區(qū)別在 B 模塊和 C 模塊的 index.vue 中。

B 模塊的 index.vue 是一個空的入口文件，C 模塊的 index.vue（充當(dāng)了 B 模塊中 a 模塊的角色） 是帶有 a、b、c 模塊的路由入口

很多時候，對于 B 模塊中的 a 模塊，因為存在去往 b、c、d 模塊的入口，會誤以為 a 模塊和 b、c、d 模塊是父子路由的關(guān)系，其實不是，這里他們是平級路由跳轉(zhuǎn)關(guān)系。