vue3动态组件加载


分三个不同的页面,按照productType的类型来显示哪个页面

html
<template>
  <RechargeType v-if="productType === 'km'" />
  <GiftCardType v-else-if="productType === 'cz'" />
  <PurchaseType v-else="productType === 'dg'" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const RechargeType = defineAsyncComponent(() => import('./RechargeType.vue'))
const GiftCardType = defineAsyncComponent(() => import('./GiftCardType.vue'))
const PurchaseType = defineAsyncComponent(() => import('./PurchaseType.vue'))

let productType = 'km' // 从服务器获取产品类型
</script>

除非有勇气离开岸边否则你永远游不到彼岸 -- 威廉·福克纳