Vuetify AppBar 和 Navigation 抽屉和嵌套路由答案

【问题标题】：Vuetify AppBar and Navigation drawer and nested RoutesVuetify AppBar 和 Navigation 抽屉和嵌套路由
【发布时间】：2021-02-21 13:32:22
【问题描述】：

我正在尝试创建一个具有登录页面（不带工具栏/抽屉）和其他页面（带工具栏/抽屉）的 vue/vuetify (v2) 应用程序。这就是我开始使用嵌套路由的原因。但不幸的是，我无法弄清楚如何正确地做到这一点。页面正在崩溃。这里图片 1. 显示我想要实现的目标和图像 2. 显示我得到的结果。

我的routes.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>

还有我的Authenticated.vue

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

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

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

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

我不确定我这样做的方式是否正确，但我通过检查是否有用户取消会话来实现这一点，所以我的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>

然后我自定义的t-nav组件是这样的：

<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>

它与您的代码完全相同，只是您尝试将导航放在带有 router-view 的主目录中，而不是在外面。

【讨论】：