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

Question

我的vue应用程序具有动态的制表符机制。

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

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

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

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

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

Answer 1

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

• 使用v-if并关闭Keep-alive组件，然后重新打开 nextTick
• 在包含列表中使用v-bind，然后删除“页面”并将其添加 回到nextTick

Answer 2

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

Answer 3

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

cachedViews 是路由组件名称的数组

首先创建tab时，cachedViews推送缓存的路由名称，切换打开的tab时，缓存当前路由。

第二次关闭tab时，cachedViews弹出缓存的路由名称，路由 组件将被销毁。