Vue3.0 组件script-setup写法 如何给组件命名 用于keep-alive缓存组件

vue3.0 组件script-setup写法 如何给组件命名 用于keep-alive缓存组件

我试过下面这种写法是可行的 :see_no_evil:,不晓得会不会有问题 :sweat_smile:

    <router-view v-slot="{ Component, route }">
       <transition>
          <div>
             <!-- 1. 在Route里设置meta.keepAlive属性,决定是否需要keep-alive -->
             <!-- 2. 设置key是为了解决TypeError: parentComponent.ctx.deactivate is not a function 问题,
                        参考:https://www.gitmemory.com/issue/vuejs/vue-next/1513/653929143
                        解决方案: Make sure to never use NaN as a key. -->
             <keep-alive>
                  <component v-if="route.meta.keepAlive" :key="route.name" :is="Component" />
            </keep-alive>
            <component v-if="!route.meta.keepAlive" :is="Component" />
          </div>
       </transition> 
    </router-view>