从 keep-alive 中手动删除（并销毁）组件

Question

我找不到如何访问从 Vue Route 加载的组件实例，并通过 <keep-alive> 和 <component> 持久化，以便我可以编程方式卸载它。

我正在实施一个动态选项卡系统，以便每个选项卡呈现一个 URL，后者又会显示其声明的组件。我不想在每次创建新选项卡或 select 另一个选项卡时每次加载新路由时都卸载组件。我通过在名为 MultiTabs:

的自定义组件中结合 keep-alive/component 来实现它

<multi-tabs>
   <router-view v-slot="{ Component }">
       <keep-alive>
           <component :is="Component" />
       </keep-alive>
   </router-view>
</multi-tabs>

到目前为止一切顺利。假设我有这些路线：

//...
{
   path: '/foo',
   name: 'Foo',
   component: () => import("./components/pages/Foo.vue"),
},
{
   path: '/bar',
   name: 'Bar',
   component: () => import("./components/pages/Bar.vue"),
},
//...

router.beforeEach((to, from, next) => {
   store.dispatch('addTab', to); // --> Vuex would then add this route to a list of tabs (routes), which I will retrieve from the MultiTabs component.
   next();
});

从我的 MultiTabs 组件中，我获取所有选项卡（查询的路由），并将它们显示为选项卡导航，以及应呈现的组件：

MultiTabs.vue:

<template>
   <!-- ... -->
   <!-- MultiTab has a close button which emits the tabClosed event  -->
   <multi-tab 
      v-for="route of storedTabs" 
      :key="route.fullPath" 
      :route="route" 
      @selectedRoute="selectRoute" 
      @tabClosed="closeTab"
      >
   </multi-tab>
   <!-- ... -->
   <!-- This is where the component for the selected route is rendered -->
   <div class="tab-pane">
      <slot/>
   </div>
</template>

因此，当用户单击选项卡中的关闭按钮时，我想从内存中释放相应的组件。请注意，通过选项卡导航不会发生这种情况，因为我使用了 keep-alive 并希望这种行为，因此不会再次安装该组件并再次执行对服务器的异步调用。

Answer 1

很遗憾，您还没有这样的功能。 Vue repo 中几乎没有问题，包括 this one 在那里你可以找到一个 hacky 示例如何做到这一点，但它使用了一些内部细节，所以使用它可能会有风险，因为这些细节随时可能改变......

这是一个正在进行的discussion/RFC所以如果你需要这个，请随时参与讨论或投票

在实现上述功能之前，您最好的选择可能是重构您的组件，不仅在 created/mounted 挂钩中而且在 [=14= 中做您需要做的事情] 激活 keep-alive 组件时调用的钩子

从 keep-alive 中手动删除（并销毁）组件

Manually remove (and destroy) a component from keep-alive

javascript

vue.js

vue-router

vuex

vuejs3