切换的时候个人中心的时候router-view会消失，如果不切换到个人中心是没有问题的

Question

Answer 1

慕瓜8308876 2022-01-06 23:37:36

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

这样就可以正常使用了！

• 提问者 慕无忌2576682 #1

  你的截图是不是上错了😂

• 慕瓜8308876 回复 提问者 慕无忌2576682 #2

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

Answer 2

提问者 慕无忌2576682 2021-12-27 17:11:05

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

Answer 3

音乐流星 2024-10-16 17:27:12

为了万无一失， 不管你的子页面是不是单节点，都能成功。这样写： 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>

Answer 4

liuying525 2022-10-27 17:54:36

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

Answer 5

慕田峪4533323 2022-02-24 15:37:54

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

Answer 6

Sunday 2021-12-27 19:02:21

你好

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

• 提问者 慕无忌2576682 #1

  vue3的官方文档已经更新了，用他们最新的用法，就不会出现这种问题了，最新的文档路由过渡动画没有 mode="out-in"这个模式
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" key="route.path" />
    </transition>
  </router-view>