vue3异步代码块加载加上Suspense

codersole

已于 2023-02-23 00:14:12 修改

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-02-23 00:09:10 首次发布

本文链接：https://blog.youkuaiyun.com/Link_Anew/article/details/129173100

前端专栏收录该内容

5 篇文章

订阅专栏

本文展示了如何在Vue应用中使用Suspense组件来处理异步组件的加载，当组件加载失败时显示加载中提示，成功后则显示组件内容。定义了一个名为asyncCom的异步组件，并通过defineAsyncComponent和import动态导入。同时，利用webpack的chunkName优化加载性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
// 可以在异步组件没有加载或者加载失败的情况下显示想要的加载中模块
 <Suspense>
 	//  失败的状态
    <template #fallback>
      <h1>正在加载</h1>
    </template>
    // 成功的状态
    <template #default>
      <asyncCom />
    </template>
  </Suspense>
  <AsyncComponent />
</template>

<script>
// 局部注册异步代码块
import { defineAsyncComponent } from "vue";
// eslint-disable-next-line
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue"));
  }, 2000);
});
let asyncCom = defineAsyncComponent(() => p);
export default {
  data() {
    return { };
  },
  components: {
    // asyncCom,
    AsyncComponent: defineAsyncComponent(() =>
      import(/*webpackChunkName:'asyncCom'*/ "./AsyncCom.vue")
    ),
  },
};
</script>