我找不到如何獲得訪問來自Vue的路線加載組件實體，并堅持通過手段<keep-alive>和<component>，這樣我可以通過編程卸載它。
我正在實作一個動態選項卡系統，以便每個選項卡呈現一個 URL，該 URL 依次顯示其宣告的組件。我不想在每次創建新選項卡或選擇另一個選項卡時加載新路由時卸載組件。我通過結合keep-alive/component一個名為 MultiTabs 的自定義組件來實作它：
<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 并希望這種行為，因此不會再次安裝該組件并再次執行對服務器的異步呼叫。
uj5u.com熱心網友回復：
不幸的是，這樣的功能還不存在。Vue repo 中的問題很少，包括這個問題，您可以在其中找到如何做到這一點的 hacky 示例，但它使用了一些內部細節，因此使用它可能存在風險，因為這些細節可能隨時更改...
這是一個正在進行的討論/RFC所以如果你需要這個，請隨時參與討論或投票
在實作上述功能之前，您最好的選擇可能是重構您的組件，并不僅在created/ mountedhooks 中執行您需要做的事情，而且在激活保持活動組件時呼叫的激活的掛鉤中執行您需要做的事情
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366321.html