<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 & маршрутизатор-зрения, как и приведенный выше код, то это вызовет вю предупреждают: <transition> может быть использован только на одном элементе.

Я знаю, что вызвало ошибку, но я хочу знать, как я могу использовать переход с 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>