vue.js - Vue3 路由器 + 转换警告

Question

我有一个带有转换的包装器组件:

// Wrapper.vue

<template>
  <transition
    appear
    mode="out-in"
    enter-active-class="animate__animated animate__fadeIn animate__faster"
    leave-active-class="animate__animated animate__fadeOut animate__faster"
  >
    <div :key="$route.path">
      <slot />
    </div>
  </transition>
</template>

然后，我用路由器中的一些组件填充默认插槽，如下所示:

// Page.vue

<template>
  <Wrapper>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </Wrapper>
</template

我正在 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.警告，这看起来很奇怪，因为我使用的是正确的语法恕我直言。这是故意的吗？如果是这样，我错过了什么？

注意:它工作正常，我只是不喜欢看警告:)

编辑:更多上下文 - 我正在尝试为桌面和移动设备创建包装器，而桌面设备应该具有上述转换。移动设备包装器的实现方式大不相同，与此处无关。

Answer 1

警告在这种情况下不应该显示，但只有当“router-view”是“transition”或“keep-”的direct子节点时才显示活”组件。

这里报告了错误:https://github.com/vuejs/router/issues/1306