异步组件

<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>

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('home')
const tabs = {
    "home": AsyncHome,
    "info": AsyncInfo,
    "team": AsyncTeam,
    "work": AsyncWork
}