Vuejs2 Vuetify AppBar和导航抽屉以及嵌套路由

我正在尝试创建一个vue/vuetify（v2）应用程序，它有一个登录页面（没有工具栏/抽屉）和其他页面（有工具栏/抽屉）。这就是我开始使用嵌套路由的原因。但不幸的是，我不知道该怎么做。佩奇正在崩溃。 这里是图1。显示我想要实现的目标和图像2。显示我得到了什么。

我的

路线.ts

：

{
    path: '/auth',
    component: Authenticated,
    meta: {requiresAuth: true},
    children: [
        {
            path: 'home',
            name: 'Home',
            component: Home,
            meta: {requiresAuth: true},
        },
    ]
},
{
    path: '/login',
    name: 'login',
    component: Login,
},

我的

App.vue

<template>
  <v-app>
    <v-main>
      <router-view/>
    </v-main>
    <snackbar/>
  </v-app>
</template>

<template>
  <div>
    <v-app-bar dense dark class="primary">
        ...
    </v-app-bar>

        <v-navigation-drawer permanent  clipped>
        ...
        </v-navigation-drawer>

    <router-view/>
  </div>
</template>

---

我不确定我这样做是否正确，但我是通过检查是否有用户取消会话来实现的，因此我的

App.vue

如下所示：

<template>
  <v-app>
    <t-nav v-if="$store.getters.userInSession"></t-nav>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

它与您的代码完全相同，只是您试图使用

路由器视图将导航放在主视图的内部，而不是外部

<template>
  <div>
    <v-app-bar :color="grey" short app>
      <v-app-bar-nav-icon @click="toggleMenu" class="white--text"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <v-toolbar-title class="white--text">{{ currentRouteName | uppercase }}</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer
        app
        color="dark"
        dark
        v-model="showMenu"
        mobile-breakpoint="500"
    >
    </v-navigation-drawer>

  </div>
</template>