vue3开发页面跳转时出现页面白屏

最新推荐文章于 2024-05-27 14:44:52 发布

coder-涛

最新推荐文章于 2024-05-27 14:44:52 发布

阅读量1.8k

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_55660255/article/details/133645772

版权

主要原因是：在vue3 setup中使用 async/await语法糖，由于每个组件有自己的异步资源加载，它们期间可能出现像挂载时数据还没请求、数据请求出错、以及争夺资源的情况等，那么就会出现上述的空白情况。

两种解决办法：

一：使用<Suspense>

<router-view v-slot="{ Component, route }">
      <transition name="fade-transform" mode="out-in">
          <Suspense>
              <keep-alive :include="tagsViewStore.cachedViews">
                  <component v-if="!route.meta.link" :is="viewData(Component)" :key="route.path"/>
              </keep-alive>
          </Suspense>
      </transition>
    </router-view>

二：直接使用Promise写法,不用语法糖的写法

注意：我是用的vue3的版本是3.2.45 ，高版本直接使用函数式写法应该不会出现这样的问题