为什么在vue3中，transition组件会导致router跳转失败？

Question

我的

router

配置：

  {
    path: '/user',
    name: 'user',
    component: Layout,
    redirect: '/user/detail',
    meta: {
      title: '111',
    },
    children: [
      {
        path: 'detail',
        name: 'UserDetail',
        component: () => import('@/pages/order/userOrder.vue'),
      },
    ],
  },
  {
    path: '/order',
    name: 'order',
    component: Layout,
    redirect: '/order/detail',
    meta: {
      title: '222',
    },
    children: [
      {
        path: 'detail',
        name: 'detail',
        component: () => import('@/pages/order/index.vue'),
      },
    ],
  },

我的组件：

  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>

如果我直接从浏览器地址栏输入url，两个页面（

user

和

order

）都会正常显示，但是如果我打开一个页面然后尝试使用路由跳转到另一个页面，url将正常变化，但

router-view

会消失。

如果我删除第一条或第二条路由的

redirect

，路由器也可以正常工作。
控制台永远不会报错。
在

:key="route.fullPath"

上添加

component

是没有用的。

经过排查，发现是

transition

组件导致了这个现象。如果我删除过渡组件，

route

可以正常跳转。

Answer 1

经过漫长的排查过程，终于发现原因是某个组件没有根节点。

transition

无法对没有根节点的组件进行动画处理，因此无法渲染页面。但奇怪的是，

transition

没有发出警告（通常

transition

应该发出警告）