// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

// 靜態(tài)導入：會隨著主包一起加載，適合首頁
import Home from '@/views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 動態(tài)導入：只有訪問 /about 路徑時，瀏覽器才會請求該組件對應的 JS 文件
    component: () => import('@/views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

<template>
  <div>
    <h1>主頁面</h1>
    <button @click="showChart = true">加載并顯示報表</button>
    
    <AsyncChart v-if="showChart" />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';

const showChart = ref<boolean>(false);

// 顯式定義異步組件
const AsyncChart = defineAsyncComponent(() =>
  import('@/components/BigChart.vue')
);

// 高級配置（可選）：帶加載狀態(tài)
const AsyncComponentWithConfig = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // 加載過程中顯示的組件
  errorComponent: ErrorComponent,     // 加載失敗時顯示的組件
  delay: 200,                         // 展示加載組件前的延遲時間
  timeout: 3000                       // 超時時間
});
</script>

export default {
  components: {
    // 定義一個異步組件
    'MyLazyComponent': () => import('./components/MyLazyComponent.vue')
  }
}