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

igsr9ssn 于 2023-03-31 发布在 Vue.js

关注(0)|答案(3)|浏览(269)

我用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"，它就能工作（但过渡是丑陋的）。
有人知道为什么吗？

vue.js

来源：https://stackoverflow.com/questions/66411838/vue-3-0-router-components-transition-does-not-work-with-mode-out-in

3条答案

按热度按时间

sauutmhj1#

出现这个问题的原因是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

赞(0）回复(0）举报 2023-03-31

zc0qhyus2#

我终于发现了错误是什么，这是多么愚蠢...
在我的模板中，我在第一个标签之前放了一个注解：

<template>

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

</template>

感谢您发送编修。

赞(0）回复(0）举报 2023-03-31

0sgqnhkj3#

每个模板只能有一个标记（元素）。

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

赞(0）回复(0）举报 2023-03-31

我来回答

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

3条答案

相关问题

热门标签

最新问答