I have a question that is similar to the one mentioned here: Vue.js - Destroy a cached component from keep alive
I am working on creating a Tab System using Vue router, and my code looks something like this:
//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>
This is an outline of how the route used by the vue-router would look:
{
path: "/tab",
name: "TabComponent",
component: () => import("InsertComponentPath"),
children: [{TabRoute1, TabRoute2, TabRoute3}]
},
Keep alive is being utilized to maintain State when switching tabs (switching childroutes).
I am trying to remove the childRoute or Component from cache when the tab is closed, but using this.$destroy in my tab component seems to destroy the whole Tab component instead of just the child component within it.
The V-if solution suggested in this and other stack overflow questions won't work because I only want to remove this specific tab from memory, and not all tabs.
Thank you for any assistance.