vue3 中-suspense的使用不生效-阻塞渲染

Question

vue3 中-suspense的使用不生效-阻塞渲染
具体问题描述：上面的tab标签切换会导致下面的路由组件切换，因为路由组件有很多异步请求最终会阻塞tab组件的渲染动画。起初打算使用suspense组件看能不能解决。但是照图片中的代码使用了suspense为没有在路由组件异步加载时展示fallback插槽中的“正在加载”字样，没有达到解决阻塞渲染的问题

Answer 1

Planetlll_hh 中午好🌞🌞🌞
本答案参考通义千问

问题描述： Vue3 中使用 Suspense 组件来处理异步加载的路由组件，但预期的 "正在加载" 字样并没有在组件未加载时显示。这可能是由于以下几个原因：

1. Suspense 配置不正确：
   • 没有正确设置 Suspense 的 v-slot，fallback 插槽应该被包含在 <Suspense> 内部。
   • key 属性可能需要与路由组件的实际路径相关联。

解决方案：

1. 修复 Suspense 的配置：
   • 将 <template #fallback> 放入 <Suspense> 标签内，确保它作为 fallback 插槽内容：

<template>
  <div class="layout-wrap-right" ref="layoutRightRe">
    <div class="tab-header">
      <Tab ref="tabRef" tabList="tabList" @switchTab="handleSwitchTab" @closeTab="handleCloseTab">
        ...
      </Tab>
      <div class="tab-header-right">...</div>
    </div>
    <div class="tab-main" ref="tabMainRef">
      <el-scrollbar max-height="80vh">
        <div class="content-wrap">
          <router-view :key="$route.fullPath">
            <Suspense>
              <transition name="slide-fade">
                <keep-alive>
                  <component :is="$route.component" key="$route.fullPath">
                    <!-- 原来的fallback在这里 -->
                    <template #fallback>
                      <span>正在加载...</span>
                    </template>
                  </component>
                </keep-alive>
              </transition>
            </Suspense>
          </router-view>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

1. 确保 key 值唯一性：

   • 如果路由组件的 name 或 path 可能变化，确保 key 值基于这些属性，这样每次组件更新时都会重新渲染，不会阻塞渲染。

2. 动态缓存路由组件：

   • 如果某些路由组件经常被重新渲染，考虑使用 <keep-alive> 和 v-if 来缓存它们，避免不必要的重新加载。

3. 检查路由守卫：

   • 确保路由守卫（如 beforeRouteEnter）没有阻塞 Suspense 的渲染。如果需要在组件加载前做额外操作，可以将其移到 async 函数中。

确保上述步骤后，Suspense 应该能正确地在组件加载时显示 "正在加载" 的提示。