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

37 *_*res 3 vue.js vue-router4

我使用 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>
Run Code Online (Sandbox Code Playgroud)

第一页是渲染器 - 没问题。但一旦我导航到另一个页面,页面就会变成空白。如果我删除它,mode="out-in"它就可以工作(但过渡很丑陋)。

有谁知道为什么?

37 *_*res 13

我终于发现这个错误是什么,而且是多么愚蠢......

在我的模板中,我在第一个标签之前添加了注释:

<template>

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

</template>
Run Code Online (Sandbox Code Playgroud)

感谢您的所有评论。

  • 谢谢,有帮助!将其标记为答案!这确实很奇怪,注释一定不能影响渲染。 (2认同)