Vue 3.0 路由器组件转换不适用于 mode= "out-in"

Question

我正在用vue 3.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"它工作(但过渡是丑陋的)。

有人知道为什么吗?

Answer 1

我终于发现错误是什么，这是多么愚蠢…

在我的模板中，我在第一个标签前放了一个注释:

<template>
<!-- login layout --> <=== NOT A GOOD IDEA...
<div class="lsn-login">
...
</div>
</template>

谢谢你的评论。

Answer 2

每个模板只能有一个标签(元素)。下面的例子将打破

<template>
<div class="about"></div>
<img class="back-img" src="/artwork/58.webp"/>
</template>

Answer 3

这个问题的原因是transition只支持单个元素。官方文件提示:

<Transition> only supports a single element or component as its slot content. 
If the content is a component, the component must also have only one single root element.

你可以在这个链接中看到一个演示:https://stackblitz.com/edit/vitejs-vite-gwfbmb?file=src%2FApp.vue