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

Lambo
  • 313

image.png
如图页面所示,如何对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})
    }
})
...
回复
阅读 521
2 个回答
✓ 已被采纳

找到解决方法了

<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',
    ]
})
<router-view v-slot="{ Component }">
  <keep-alive :include="tagsList">
    <component :is="Component" />
  </keep-alive>
</router-view>

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏