异步组件

<template>
    <div>
        <button v-for="(_, tab) in tabs" @click="currentTab = tab" :key="tab"
        :class="['tab-button', { active: currentTab === tab }]">{{ tab }}</button>
        <component :is="tabs[currentTab]" class="tab"></component>
    </div>
</template>
    
<script setup>
import { defineAsyncComponent, ref } from 'vue'

const AsyncHome = defineAsyncComponent(() => import('./components/Home.vue'))
const AsyncInfo = defineAsyncComponent(() => import('./components/Info.vue'))
const AsyncTeam = defineAsyncComponent(() => import('./components/Team.vue'))
const AsyncWork = defineAsyncComponent(() => import('./components/Work.vue'))
   
const currentTab = ref('AsyncHome')
const tabs = {
    AsyncHome,
    AsyncInfo,
    AsyncTeam,
    AsyncWork
}
</script>