如何管理不同路由器视图中的对话框？

Question

我的 vue-router 和 v-dialog（vuetify.js 组件）在不同的 router-view 中有问题s.

我的 App.vue 看起来像这样：

<template>
  <transition>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </transition>
</template>

在每个 router-view 我有一个组件：

<template>
  <v-app>
    <app-header></app-header>
    <v-content></v-content>
    <app-footer></app-footer>

    <!-- a couple of dialogs here -->
    <v-dialog v-model="someData.show"></v-dialog>
    <v-dialog v-model="anotherData.show"></v-dialog>
    <v-dialog v-model="yetAnotherData.show"></v-dialog>
  </v-app>
</template>

当我在不同的 router-view 之间切换并打开对话框叠加显示时，但对话框没有。除了首先加载页面的 router-view。

好像是什么问题？这与我定义路由或组件的方式有关吗？

你在这里查看完整代码：https://github.com/websanya/gkp7-app/

求求你帮忙！

Answer 1

事实上，我应该在 App.vue 文件中的 router-view 之外只使用一个 v-app。

<template>
  <!-- OVER HERE -->
  <v-app>
    <transition>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </transition>
  </v-app>
  <!-- / OVER HERE -->
</template>

很有魅力。

如何管理不同路由器视图中的对话框？

How to manage dialogs in different router-views?

vue.js

vue-router

vue-component

vuejs2

vuetify.js