vue3配置router.js实现指定页面的keepalive，以下两种写法 第一种不行 为什么?

Question

为什么上面的无效 下面的有效

第一种
        <router-view v-slot="{ Component }">
          <template v-if="$route.meta.keepalive">
            <keep-alive>
              <component :is="Component"/>
            </keep-alive>
          </template>
          <template v-else>
            <component :is="Component"/>
          </template>
        </router-view>


第一种

        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" v-if="$route.meta.keepalive" />
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepalive" />
        </router-view>

Answer 1

原理：
就是一个组件，缓存也是把里的内容存在组件的data里,如果在上v-if判断，缓存直接就被销毁，组件data里的参数自然都被回收了。如果要动态缓存内容可以用include来引入缓存的内容

v-show可以解决被销毁的问题，但不推荐