Vue.js - 删除从 keep-alive 加载的子组件

Question

我的问题类似于此处列出的问题： 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}]
    },

在切换选项卡（切换子路由）时，保持活动用于维护状态。

我想在选项卡关闭时从缓存中删除 childRoute/Component 但this.$destroy在我的选项卡组件中使用它似乎正在破坏整个 Tab 组件而不是其中的子组件。

在这个和其他堆栈溢出问题中也提到的 V-if 解决方案将不起作用，因为我只想从内存中删除这个特定的选项卡，这将删除所有选项卡。

谢谢你的帮助。

Answer 1

我使用includekeep-Alive https://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>