我有一个带有转换的包装器组件:
// 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>.
警告,这看起来很奇怪,因为我使用的是正确的语法恕我直言。这是故意的吗?如果是这样,我错过了什么?
注意:它工作正常,我只是不喜欢看警告:)
编辑:更多上下文 - 我正在尝试为桌面和移动设备创建包装器,而桌面设备应该具有上述转换。移动设备包装器的实现方式大不相同,与此处无关。
最佳答案
警告在这种情况下不应该显示,但只有当“router-view”是“transition”或“keep-”的direct子节点时才显示活”组件。
关于vue.js - Vue3 路由器 + 转换警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70848012/