Vue3中Suspense结合路由布局时失效问题求助

切换同布局路由时，动态渲染的布局组件（<component :is="layout">）因:is值未变化，Vue会复用该组件实例，导致内部的RouterView和Suspense不会重新挂载。而Suspense仅在组件首次挂载时等待异步setup执行，复用状态下不会再次触发，因此出现仅项目重启后生效、同布局切换失效的现象。切换不同布局路由时，布局组件实例被替换，内部的RouterView和Suspense重新挂载，Suspense功能自然恢复正常。

给动态布局组件添加路由相关的key，强制Vue在路由切换时重新渲染布局组件（即使布局类型相同），让内部的Suspense重新触发异步等待逻辑，同时修正计算属性中不必要的useRoute调用：

修改后的App.vue核心代码：

<script setup>
import {RouterView, useRoute, useRouter} from 'vue-router';
import {computed} from "vue";
import NotifiactionBlock from "./views/components/blocks/NotifiactionBlock.vue";
import LoadSpinner from "./views/components/elements/spinners/LoadSpinner.vue";

const router = useRouter();
const route = useRoute();

// 修正：直接使用已声明的route变量，避免在computed内重复调用useRoute
const layout = computed(() => {
    return route.meta.layout ?? 'default-layout';
});
</script>

<template>
    <div>
        <!-- 添加key绑定到route.fullPath，确保路由切换时布局组件重新渲染 -->
        <component :is="layout" :key="route.fullPath">
            <RouterView v-slot="{ Component }">
                <template v-if="Component">
                    <Transition name="page" mode="out-in">
                        <Suspense>
                            <component :is="Component"></component>
                            <template #fallback>
                                <load-spinner></load-spinner>
                            </template>
                        </Suspense>
                    </Transition>
                </template>
            </RouterView>
        </component>

        <NotifiactionBlock></NotifiactionBlock>
    </div>
</template>

• :key="route.fullPath"：每次路由切换时，fullPath会发生变化，强制Vue销毁旧的布局组件实例并创建新实例，内部的RouterView和Suspense也会重新挂载。
• 重新挂载的Suspense会再次等待页面组件的异步setup执行，从而正确显示加载状态直到异步操作完成。

内容的提问来源于stack exchange，提问作者FIZZLE ROCKS