<transition> 只能用在单个元素上

Question

<transition name="fade" mode="out-in">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

当我使用 keep-alive & router-view 的 transition 时，就像上面的代码一样，它会导致 vue 警告：<transition> can only be used on a single element.

我知道导致错误的原因，但我想知道如何正确使用 keep-alive 和 router-view 的转换？

Answer 1

您可以将所有这些元素包装在 <template> 中，如下所示：

<transition name="fade" mode="out-in">
  <template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  </template>
</transition>

<transition> 只能用在单个元素上

<transition> can only be used on a single element

vue-router

vuejs2