Блог

Я использую компонент Vue в качестве «макета», чтобы иметь возможность загружать динамический контент с помощью представления маршрутизатора со слотом. Этот компонент окружен компонентом перехода, обеспечивающим плавные переходы между страницами. Это прекрасно работает:

 <template>
  <AppLayout>
    <router-view v-slot="{ Component }">
      <transition name="slide" mode="out-in"> <component :is="Component" /> </transition>
    </router-view>
  </AppLayout>
</template>
 

Компонент, который необходимо отобразить, указан в конфигурации маршрутизатора с использованием свойства компонента:

 export const routes = [
  {
    path: "/",
    component: Intro,
    meta: {
      layout: "AppLayoutDefault",
    },
  }
]
 

Это работает нормально, однако, когда я использую несколько корневых тегов в компоненте, это нарушается, т. Е.:

 <template>
  <ComponentA />
  <ComponentB />
</template>

<script>
export default defineComponent({
  name: "Intro",
  components: {
      ...
  }
});
</script>
 

Показана ошибка: [Предупреждение Vue]: Компонент внутри отображает неэлементный корневой узел, который не может быть анимирован.
И новая страница не отображается.

Я понимаю, что могу исправить переход, окружающий 2 компонента в одном окружающем div, однако я хотел бы точно понять, почему текущая настройка не работает, и надеюсь на лучшее решение.