异步组件封装

原创已于 2025-09-02 09:13:53 修改 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2025-09-01 09:28:25 首次发布

import { defineAsyncComponent } from 'vue';

const createAsyncComponent = (componentPath) => {
  return defineAsyncComponent({
    loader: () => import(componentPath),
    loadingComponent: LoadingComponent,
    delay: 200,
    errorComponent: ErrorComponent,
    timeout: 3000
  });
};

// 使用该封装函数注册多个异步组件
const AsyncComp1 = createAsyncComponent('./Foo.vue');
const AsyncComp2 = createAsyncComponent('./Bar.vue');
const AsyncComp3 = createAsyncComponent('./Baz.vue');

方法提取混入

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>