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.
from Vue.js - Remove a child component loaded from keep-alive
No comments:
Post a Comment