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

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

//My Tab ponent 
<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",
        ponent: () => 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 ponent it seems to be destroying the whole Tab ponent and not the child ponent 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.

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

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

//My Tab ponent 
<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",
        ponent: () => 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 ponent it seems to be destroying the whole Tab ponent and not the child ponent 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.

• javascript
• typescript
• vue.js
• vue-router

• Can I ask why? There might be another solution, if we know why you want to "remove" a ponent from cache. – tauzN Commented Apr 20, 2021 at 16:17
• @tauzN Sorry for the late reply, the reason why is because some cases when a tab is closed and opened again it'll open in the same state it was closed in but ideally we want it to open fresh like it did before. – Jahson Commented Apr 24, 2021 at 8:23
• 1 Can you prepare some sample code on codepen or codesandbox? – Adam Orłowski Commented Apr 26, 2021 at 12:25

4 Answers 4

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

I kept an array of currently active Tabs using router.getmatchedponents() to get the ponent 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 ponent 
<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.getmatchedponents().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>

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

in a child ponent works perfectly fine.

While working with Parent and Child ponents, I've almost always have to use vuex to update the chain processes from happening with updates to any of the underlying ponents rendered on the page.

After making updates to the Vuex, I usually update the key of the ponent in context to re-render it.

Vuex seems to resolve the state management issues in most cases and you won't have to use keep-alive after that.

It always solves the problem. I'm hoping this could help you if I've understood your problem.

If I've misunderstood it please ment and I'll remove it.

Why don't you remove the child from the router that should automatically update your ponent you can try router.replaceRoutes(routes)