【问题标题】:How use two v-navigation-drawer?如何使用两个 v-navigation-drawer?
【发布时间】:2020-10-02 13:52:31
【问题描述】:

我想在我的应用程序中使用两个 v-navigation-drawer。 我想将第二个 v-navigation-drawer 放在 v-app 的 v-content 上。

这张图片,我把示例图片放在了v-content里面。

因为,我创建了路线。当点击第二个 v-navigation-drawer 的 item 时,会打开 v-navigation-drawer 旁边的另一个组件。

例如:

  1. blabla/设置/配置文件
  2. blabla/settings/conf

链接:https://vuetifyjs.com/en/components/application/

【问题讨论】:

    标签: vue.js vuejs2


    【解决方案1】:

    因此,根据您的示例,路线有点嵌套:Settings 在第一个抽屉中,Profile & Conf 在第二个/子抽屉中。让我们称之为Nested Routes

    1) 如果您希望拥有这些抽屉,您需要创建:

    1 MainDrawer.vue 包装 1 ChildDrawer.vue 包含/包装<router-view> 子组件的组件(如果您使用的是vue-router)。您必须通过在“设置”下附加 <router-link to="/settings/profile"> 和其他路由来连接链接。如果到达 /profile 或 /config 路由,您将不得不切换第二个子抽屉的抽屉“打开”状态。

    2) Vuetify 使用 Nested List(link here) 代替这种方法,它使用 v-list-group 组件解决您的子路由,深度可达 2 级(这对于您的情况也足够了)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-06-30
      • 2020-03-15
      • 2020-04-16
      • 2019-02-25
      • 2019-02-26
      • 2021-10-23
      • 1970-01-01
      • 2022-01-21
      相关资源
      最近更新 更多