Vue.js-从保持活动状态中销毁缓存组件

我的vue应用程序具有动态选项卡机制

用户可以动态创建任意数量的选项卡，每个选项卡都有自己的状态（例如“页面”）

我正在使用

组件缓存不同的页面

<keep-alive include="page">
  <router-view :key="$route.params.id" />
</keep-alive>

但用户也可以“关闭”单个选项卡。由于页面倾向于存储大量数据，我希望在用户关闭选项卡时从缓存中删除相应的页面组件

---

如何以编程方式销毁keep alive中的缓存组件？

如果您不介意在添加/删除选项卡时丢失状态，则可以尝试以下方法：

• 使用v-if并关闭“保持活动”组件，然后在中重新打开 尼克斯蒂克
• 在包含列表上使用v-bind，删除“页面”并添加它 回到nextTick

---

在用户关闭选项卡并删除该选项卡中的所有数据和事件绑定之前，您可以调用

this.$destroy（）

。

也许您需要了解一下这一点，@SIMDD此技术将在使用v-if完全删除保持活动组件时销毁所有缓存页面。我想销毁单个缓存组件。我想保留所有其他页面的状态！这样做，我将失去所有页面的状态。