vue 筆記

記錄用

懶加載路由

// 靜態加載
{
  path: '/dashboard',
  name: 'dashboard',
  component: dashboard
},

// 懶加載
{
  path: '/nfv_mano_plugin',
  name: 'nfv_mano_plugin',
  component: () => import(/* webpackChunkName: "nfv_mano_plugin" */ '../views/nfv_mano_plugin.vue')
},

懶加載元件

• loader：使用動態引入，引入欲使用的 Component
• loadingComponent：加載超過 delay 時間，顯示的 loading Component，待加載完成再顯示加載的 component
• errorComponent：加載超過 timeout 秒數時，顯示的 error Component
• delay：在 delay 多久後顯示等待組件
• timeout：超過 timeout 時間後渲染錯誤組件

// 靜態加載
import Table from '../components/global/table.vue';

// 懶加載 ( without options )
const Modalcreate = defineAsyncComponent(() => import('../components/global/modal-create.vue'))

// 懶加載 ( with options )
const Modalcreate = defineAsyncComponent( {
  // 為了清晰看到檔名，這裏使用 webpackChunkName 指定檔名
  loader: () => import(/* webpackChunkName: "Modalcreate" */'../components/global/modal-create.vue'),
  // delay: 2000, // 2 秒後顯示等待組件 LoadingComponent
  // timeout: 3000, // 如果超過 3 秒，顯示錯誤組件 ErrorComponent
  // loadingComponent: Loading
});