Vue 3.0 路由器组件转换不适用于 mode="out-in" [英] Vue 3.0 router components transition does not work with mode="out-in"
问题描述
我使用 vue 3.0 和 vue-router 4.0 构建了一个应用程序.
我的 App.vue 组件(第一个呈现的组件)中有这个非常简单的代码:
<过渡名称=淡入淡出"；模式=出入"出现><component :is=组件"></component></路由器视图> 第一页是渲染器 - 没问题.但是一旦我导航到另一个页面，页面就会变成空白.如果我删除 mode="out-in" 它可以工作(但过渡很难看).
有人知道为什么吗?
我终于发现错误是什么，它是多么愚蠢...
在我的模板中，我在第一个标签前添加了一条评论:
<!-- 登录布局--><=== 不是一个好主意...<div class="lsn-login">...</模板>
感谢您的所有评论.
I building an application with vue 3.0 and vue-router 4.0.
I have this very simple code in my App.vue component (first rendered component) :
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in" appear>
<component :is="Component"></component>
</transition>
</router-view>
First page is renderer - no problem. But as soon as I navigate to another page, page become blank. If I remove the mode="out-in" it works (but transition is ugly).
Does anyone know why ?
I finally found were the mistake was, and how stupid it was...
In my template, I put a comment before the first tag:
<template>
<!-- login layout --> <=== NOT A GOOD IDEA...
<div class="lsn-login">
...
</div>
</template>
Thank you for all your comment.
这篇关于Vue 3.0 路由器组件转换不适用于 mode="out-in"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
