對有載入狀態的非同步元件的封裝

/** * 處理路由頁面切換時，非同步元件載入過渡的處理函式 * @param {Object} AsyncView 需要載入的元件，如 import('@/components/home/Home.vue') */ // 使用方式 const helloWorld = () => lazyLoadView(import('@/components/helloWorld')) export const lazyLoadView = (AsyncView) => { return () => ({ // 需要載入的元件 (應該是一個 `Promise` 物件) component: AsyncView, // 非同步元件載入時使用的元件 // loading: require('@/components/public/RouteLoading.vue').default, loading: { template: '<div>loading...</div>'}, // 載入失敗時使用的元件 // error: require('@/components/public/RouteError.vue').default, error: { template: '<div>error...</div>'}, // 展示載入時元件的延時時間。預設值是 200 (毫秒) delay: 200, // 如果提供了超時時間且元件載入也超時了， // 則使用載入失敗時使用的元件。預設值是：`Infinity` timeout: 10000 }); } 使用

使用@hook生命週期鉤子函式監聽元件掛載狀態

也可以自定義@mounted方法，自組建通過this.$emit觸發