我的问题类似于此处列出的问题:
Vue.js - Destroy a cached component from keep alive
我还使用 Vue 路由器创建了一种选项卡系统,因此代码如下所示:
//My Tab component
<template>
<tab>
<tab-selector />
<keep-alive>
<router-view />
<!-- This router view is used to render one of the childRoutes of the main TabRoute -->
</keep-alive>
</tab>
</template>
<script>
handleTabClose() {
//Close tab logic
this.$destroy();
//Insert router push to be one of the other tabs that have not been closed.
}
</script>
vue-router 使用的路由的轮廓如下所示: {
path: "/tab",
name: "TabComponent",
component: () => import("InsertComponentPath"),
children: [{TabRoute1, TabRoute2, TabRoute3}]
},
在切换选项卡(切换子路由)时使用保持事件状态来维护状态。我想在关闭选项卡但使用
this.$destroy
时从缓存中删除 childRoute/Component在我的选项卡组件中,它似乎正在破坏整个选项卡组件,而不是其中的子组件。这个问题和其他堆栈溢出问题中还说明的 V-if 解决方案将不起作用,因为我只想从内存中删除这个特定的选项卡,这会删除所有选项卡。
谢谢你的帮助。
最佳答案
我找到了使用 include
的解决方案keep-Alive 中的参数 https://v2.vuejs.org/v2/api/#keep-alive
我使用 router.getmatchedcomponents()
保留了一组当前事件的标签。获取当前打开的选项卡的组件名称。
然后在我的handleClose()
函数,我从 include
中删除已关闭的选项卡大批。
最终实现看起来有点像这样:
//My Tab component
<template>
<tab>
<tab-selector />
<keep-alive :include="cacheArr">
<router-view />
<!-- This router view is used to render one of the childRoutes of the main TabRoute -->
</keep-alive>
</tab>
</template>
<script>
private cacheArr = []
//Called whenever a new tab is opened
handleOpen() {
//Add current Tab to this.cachArr
this.cachArr.push(router.getmatchedcomponents().pop().name);
}
//Called whenever new tab is closed.
handleTabClose(name) {
//Close tab logic
//Remove Tab being closed from this.cacheArr
this.cacheArr.splice(this.cacheArr.indexOf(name), 1);
}
</script>
关于javascript - Vue.js - 删除从 keep-alive 加载的子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67180234/