CODEWITHSUNDEEP
vue-routervuejs2
wenkang lin
wenkang lin

Reputation: 129

<transition> can only be used on a single element

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

Upvotes: 1

Views: 12099

Answers (1)

Saurabh
Saurabh

Reputation: 73589

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>

Upvotes: 3

Related Questions