Vue.js - Remove a child component loaded from keep-alive

Question

My question is similar to the one listed here: Vue.js - Destroy a cached component from keep alive

I am also creating a sort of Tab System using the Vue router so the code looks like so:

//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>

Outline of how the route used by the vue-router would look like:

    {
        path: "/tab",
        name: "TabComponent",
        component: () => import("InsertComponentPath"),
        children: [{TabRoute1, TabRoute2, TabRoute3}]
    },

Keep alive is being used to maintain State when switching tabs (switching childroutes).

I want to remove the childRoute/Component from cache when the tab is closed but using this.$destroy in my tab component it seems to be destroying the whole Tab component and not the child component within it.

The V-if solution also stated in this and other stack overflow questions will not work as I only want to remove this specific tab from memory and this removes all tabs.

Thanks for any help.

Answer 1

I found a solution using the include argument in keep-Alive https://vuejs.org/v2/api/#keep-alive

I kept an array of currently active Tabs using router.getmatchedcomponents() to get the component name of the currently opened tab.

And then in my handleClose() function, I remove the tab that has been closed from the include array.

Final Implementation looked somewhat like so:

//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>

Answer 2

deactivated() {
    this.$destroy();
},

in a child component works perfectly fine.