transition标签中引用mode=“out-in“之后切换页面显示空白
  FR8r9i3bpUMu 2023年11月02日 40 0


项目场景:

提示:前端vue项目路由切换之后页面空白:

例如:项目场景:在使用transation之后,路由切换有动画,但是使用mode=“out-in” 之后,页面切换之后变空白了。


问题描述

例如:在使用transation之后,路由切换有动画,但是使用mode=“out-in” 之后,页面切换之后变空白了。

<router-view v-slot="{ Component }">
  <Transition name="child" mode="out-in" appear >
    <component :is="Component" :key="route.path" />
  </Transition>
</router-view>

原因分析:

提示:因为路由切换的时候要组件为一个唯一的组件:

例如:我在写的时候,一个template下边有多个div,所以就造成了路由切换之后,不能动态的使用动画。


解决方案:

答案:把template下边的多个div套在一个div里边


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
FR8r9i3bpUMu