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

Posted 2023-02-23

【中文标题】如何管理不同路由器视图中的对话框？

【英文标题】：How to manage dialogs in different router-views?

【发布时间】：2018-09-25 07:16:16

【问题描述】：

我的vue-router 和v-dialogs（vuetify.js 组件）在不同的router-views 中有问题。

我的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-views 之间切换并打开对话框覆盖显示，但对话框没有。除了第一次加载页面的router-view。

似乎是什么问题？是否与我在那里定义路由或组件的方式有关？

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

请帮忙！

【参考方案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>

像魅力一样工作。

【讨论】：

如果您不知道：您可以而且应该接受自己的答案，以使问题显示为“已回答”。

我知道，只是在发布后 2 天之前无法接受我自己的答案。而我忘记了。