vue3 异步组件 使用

组件的引入

<template>
  <div class="index">
    <el-button type="primary" @click="isShow = true">primary页面</el-button>
    <el-button type="success" @click="isShow = false">success页面</el-button>
    <primaryPage v-if="isShow" />
    <successPagev-else />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';

const isShow = ref(false);

// 第一种方式 需要 return 否则报错
const primaryPage = defineAsyncComponent(() => {
  return import('./common/primary.vue');
});

// 第二种方式 
const successPage= defineAsyncComponent({
  loader: () => import('./common/success.vue'),
  delay: 200,
});
</script>

方式一直接 import() 不 return 会报错

侵删 https://blog.csdn.net/langligelangxy/article/details/130179889