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＆amp;的转换时router-view，就像上面的代码一样，它会引起vue警告：<transition>只能在一个元素上使用。

我知道导致错误的原因，但我想知道如何使用keep-alive＆amp; 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>只能用于单个元素

1 个答案: