6回答

慕瓜8308876

2022-01-06

这个问题我也碰到了 要使用 mode="out-in"  要确保template下只有一个根节点元素

这样就可以正常使用了！

2

2

慕瓜8308876

回复

慕无忌2576682

没有错，我之前个人中心页 template下有两个根元素 出现了和你一样的问题，个人中心页改为这样 只有一个根元素就可以了！

2022-01-06

共2条回复

音乐流星

2024-10-16

为了万无一失， 不管你的子页面是不是单节点，都能成功。这样写： keep-alive 下面包一层div 并绑定key

<template>
    <div class="app-main">
        <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
                <keep-alive>
                    <div :key="route.path">
                        <component :is="Component" />
                    </div>
                </keep-alive>
            </transition>
        </router-view>
    </div>
</template>

1

0

慕无忌2576682

提问者

2021-12-27

vue3官网更新了 不是这样的写法了，按照官网就可以实现了

1

0

liuying525

2022-10-27

就是个人中心外面包裹一层DIV就行了。

0

0

慕田峪4533323

2022-02-24

<transition>只能用于单元素/组件之上  原因可能是组件没有根标签

0

0

Sunday

2021-12-27

你好

首先这个问题并不是 router-view 消失了，准确来说，应该是《该路径下匹配到的组件并没有被成功渲染》，所针对这个问题，我建议你查看下对应的组件，来明确出现该问题的原因。

0

1

慕无忌2576682

vue3的官方文档已经更新了，用他们最新的用法，就不会出现这种问题了，最新的文档路由过渡动画没有 mode="out-in"这个模式

2021-12-28

共1条回复