如何在 Nuxt3/Vue3 上插槽內的數據發生變化時使用轉換

Question

我似乎無法讓我的應用程序在路線更改時進行轉換，因為我使用的是默認布局，這對於每條路線都是相同的。 我希望插槽內的內容隨着路線的變化而轉換，而不必重新加載/轉換布局。

layouts/default.vue

<template>
    <div class="bg-darkSecondary dark:bg-black h-screen">
        <teleport to="body">
            <transition name="modal-fade">
                <div v-if="uiStore.functionLoading" class="modal-backdrop">
                    <UiBaseSpinner></UiBaseSpinner>
                </div>
            </transition>
        </teleport>
        <UiNav class="dark:bg-darkBg dark:text-darkSecondary" />
        <div class="flex dark:bg-black bg-darkSecondary">
            <transition name="sidebar" mode="out-in">
                <UiSideNav v-if="uiStore.sidebar" />
            </transition>
            <transition name="fade" mode="out-in">
                <div
                    v-if="!uiStore.appLoading"
                    class="flex-grow max-w-full max-h-full bg-darkSecondary dark:bg-black trans"
                >
                    <transition name="fade" mode="out-in" appear>
                        <div>
                            <slot />
                        </div>
                    </transition>
                </div>
                <div v-else class="flex flex-grow mt-40 justify-center trans">
                    <UiBaseSpinner />
                </div>
            </transition>
        </div>
        <UiFooter class="fixed bottom-0" />
    </div>
</template>

我特別試圖讓下面的插槽在每次數據發生變化時進行轉換，例如，如果我要更改路由，那么插槽中的內容將會改變，但我無法理解如何應用轉換，因為技術上沒有如果我沒記錯的話，從 DOM 中刪除 Slot 只是用不同的數據呈現。

layouts/default.vue

<transition name="fade" mode="out-in">
    <div v-if="!uiStore.appLoading" class="flex-grow max-w-full max- 
       h-full bg-darkSecondary dark:bg-black trans">
            <transition name="fade" mode="out-in" appear>
                <div>
                    <slot />
                </div>
            </transition>
        </div>
        <div v-else class="flex flex-grow mt-40 justify-center 
         trans">
            <UiBaseSpinner />
        </div>
</transition>

Answer 1

我剛剛意識到如何做到這一點，您可以將:key="$route.path"添加到包含如下插槽的 div

<transition name="fade" mode="out-in" appear>
  <div :key="$route.path">
    <slot />
  </div>
</transition>