如何使用兩個 v-navigation-drawer？

Question

我想在我的應用程序中使用兩個 v-navigation-drawer。 我想將第二個 v-navigation-drawer 放在 v-app 的 v-content 上。

這張圖片，我把示例圖片放在 v-content 里面。

因為，我創建了路線。 當點擊第二個 v-navigation-drawer 的 item 時，將打開 v-navigation-drawer 旁邊的另一個組件。

前任：

1. blabla/設置/配置文件
2. blabla/設置/conf

鏈接： https://vuetifyjs.com/en/components/application/

Answer 1

因此，根據您的示例，路線有點嵌套：第一個抽屜中的Settings和第二個/子抽屜中的配置文件和Profile & Conf 。 讓我們稱這些Nested Routes 。

1）如果您希望擁有這些抽屜，您需要創建：

1 個MainDrawer.vue組件，包含 1 個ChildDrawer.vue子組件，其中包含/包裝<router-view> （如果您使用的是vue-router ）。 您必須通過 append <router-link to="/settings/profile">和設置下的其他路由連接鏈接。 如果到達 /profile 或 /config 路線，您將不得不切換第二個子抽屜的抽屜“打開”state。

2) Vuetify 沒有這種方法，而是使用Nested List （此處鏈接），它使用v-list-group組件解決您的子路由，深度可達 2 級（這對於您的情況也足夠了）。