vue3.x keep-alive如何动态的缓存

Question

如图页面所示，如何对keep-alive缓存的页面，进行取消缓存，是否可以动态的设置include，或者其他类似实现的方法。

...
//template

<keep-alive :include="data.tabs.map(itm => itm.name).join(',')">
    <router-view />
</keep-alive>


//script
const data = reactive({
    tabs:[
        {name:'home',label:'主页'},
        {name:'offlineOrder',label:'线下订单'},
        {name:'shop',label:'店铺绑定'},
    ],
    closeClick(name) {
        //我想在某个tab页面在点击关闭时，对keep-alive取消缓存，如何实现？？？
        remove(this.tabs, {name:name})
    }
})
...

Answer 1

找到解决方法了

<router-view v-slot="{ Component }">
    <keep-alive v-if="data.tabList.includes($route.name)">
          <component :is="Component" />
    </keep-alive>
    <component v-else :is="Component" />
</router-view>

const data = reactive({
    tabList:[ //这个时候只需要删除数组某一项，就可以对其取消缓存
        'home',
        'news',
    ]
})

Answer 2

<router-view v-slot="{ Component }">
  <keep-alive :include="tagsList">
    <component :is="Component" />
  </keep-alive>
</router-view>

需要缓存的页面，就把组件name传入数组，不需要时移除即可
tagsList = ["home", "offlineOrder"]