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

  • Z时代
  • 2024-02-24
  • 分类：IT

vue3.x keep-alive如何动态的缓存
如图页面所示，如何对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})
    }
})
...

回答：

找到解决方法了

<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"]

以上是 vue3.x keep-alive如何动态的缓存 的全部内容， 来源链接： utcz.com/p/936276.html

回到顶部