<transition> can only be used on a single element

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>

when i use the transition with keep-alive & router-view, like above code, it will cause vue warn: <transition> can only be used on a single element.

I know what caused the error, but I want to know how can i use the transition with keep-alive & router-view correctly ?

Answer 1

You can wrap all those elements inside <template> like following:

<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>