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

Question

我的 vue 应用程序有一个动态标签机制。

用户可以根据需要随时创建任意数量的标签，每个标签都有自己的状态（例如“页面”）。

我正在使用该<keep-alive>组件来缓存不同的页面。

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

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

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

Answer 1

您可以this.$destroy()在用户关闭选项卡之前调用并删除该选项卡中的所有数据和事件绑定。