我用vue3.0和vue-router 4.0构建了一个应用程序。
在我的App.vue
组件(第一个呈现的组件)中有以下非常简单的代码:
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in" appear>
<component :is="Component"></component>
</transition>
</router-view>
第一个页面是渲染器-没有问题。但是一旦我导航到另一个页面,页面就变得空白。如果我删除mode="out-in"
,它就能工作(但过渡是丑陋的)。
有人知道为什么吗?
3条答案
按热度按时间sauutmhj1#
出现这个问题的原因是transition只支持单个元素,官方文档提示:
你可以在这个链接中看到一个演示:https://stackblitz.com/edit/vitejs-vite-gwfbmb?file=src%2FApp.vue
zc0qhyus2#
我终于发现了错误是什么,这是多么愚蠢...
在我的模板中,我在第一个标签之前放了一个注解:
感谢您发送编修。
0sgqnhkj3#
每个模板只能有一个标记(元素)。