[英]Manually remove (and destroy) a component from keep-alive
I can't find how to get access to a component instance loaded from Vue Route, and persisted by means of <keep-alive>
and <component>
, so that I can programmatically unmount it.我找不到如何访问从 Vue Route 加载并通过
<keep-alive>
和<component>
持久化的组件实例,以便我可以以编程方式卸载它。
I'm implementing a dynamic tab system so that each tab renders a URL, which in turn displays its declared component.我正在实现一个动态选项卡系统,以便每个选项卡呈现一个 URL,然后显示其声明的组件。 I don't want to unmount a component everytime I load a new route whenever I create a new tab, or select another tab.
我不想在每次创建新选项卡或 select 另一个选项卡时加载新路由时卸载组件。 I achieved it by combining with
keep-alive/component
in a custom component called MultiTabs:我通过在一个名为 MultiTabs 的自定义组件中结合
keep-alive/component
来实现它:
<multi-tabs>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</multi-tabs>
So far so good.到目前为止,一切都很好。 Let's say I've got these routes:
假设我有这些路线:
//...
{
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();
});
From my MultiTabs component, I get all the tabs (queried routes), and display them, as the tabs navigation, and the component that should be rendered:从我的 MultiTabs 组件中,我获取所有选项卡(查询路由),并将它们显示为选项卡导航,以及应该呈现的组件:
MultiTabs.vue: 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>
So, when the user clicks on the close button in a tab, I want to free the corresponding component from memory.因此,当用户单击选项卡中的关闭按钮时,我想从 memory 中释放相应的组件。 Note that this won't happen navigating through tabs because I used keep-alive and want this behaviour, so that the component is not mounted again and it performs the async calls to the server again.
请注意,导航选项卡不会发生这种情况,因为我使用了 keep-alive 并且想要这种行为,这样组件就不会再次挂载,它会再次执行对服务器的异步调用。
Unfortunately for you such functionality does not exists yet.不幸的是,这样的功能还不存在。 There are few issues in Vue repo including this one where you can find a hacky sample how to do that but it uses some internal details so using it might be risky as those details can change anytime...
Vue repo 中几乎没有问题,包括这个问题,您可以在其中找到一个 hacky 示例如何做到这一点,但它使用了一些内部细节,因此使用它可能会有风险,因为这些细节可以随时更改......
Here is a ongoing discussion/RFC so if you need this, feel free to engage in the discussion or vote这是一个正在进行的讨论/RFC ,所以如果你需要这个,请随时参与讨论或投票
Until the mentioned functionality is implemented, your best option is probably to refactor your components and do what you need to do not only in created
/ mounted
hooks but also inactivated hook which is called when kept-alive component is activated在实现上述功能之前,您最好的选择可能是重构您的组件并执行您需要做的事情,不仅是在
created
/ mounted
的钩子中,而且在激活的钩子中,当保持活动组件被激活时调用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.