Vue中Router非同步元件和新增處理載入狀態
阿新 • • 發佈：2022-04-20
- 工廠函式中返回一個 Promise，所以把 webpack 2 和 ES2015 語法加在一起，我們可以這樣使用動態匯入：
Vue.component(
'async-webpack-example',
// 這個動態匯入會返回一個 `Promise` 物件。
() => import('./my-async-component')
)
// 或者區域性註冊元件中使用鍵值對方式
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
- 非同步元件工廠函式可以返回一個如下格式的物件：
onst AsyncComponent = () => ({ // 需要載入的元件 (應該是一個 `Promise` 物件) component: import('./MyComponent.vue'), // 非同步元件載入時使用的元件 loading: LoadingComponent, // 載入失敗時使用的元件 error: ErrorComponent, // 展示載入時元件的延時時間。預設值是 200 (毫秒) delay: 200, // 如果提供了超時時間且元件載入也超時了， // 則使用載入失敗時使用的元件。預設值是：`Infinity` timeout: 3000 })