Dieser Artikel enthält eine kurze Analyse der asynchronen Komponentenfunktionen von Vue. Er enthält entsprechende Codebeispiele.
export default new Router({
routes: [
{
path: '/live',
name: 'live',
component: () => import('@/view/live/live.vue')
}
]
})Der obige Code ist eine sehr häufige Aufteilung des Router-Codes. Live.vue wird nur geladen, wenn der Code an live weitergeleitet wird.
Auf diese Weise ist der Prozess zum Abrufen von live.vue jedoch leer und nichts wird passieren. Nein, die Erfahrung ist nicht gut, indem man die von vue bereitgestellte asynchrone Assembly verwendet
Auf diese Weise wird es eine angepasste Ladeanzeige geben, bevor es live geht.vue
Aber es gibt viele Routen, und wir können nicht jede haben. Jede Route schreibt eine ladbare.vue, also schreiben Sie eine Funktion, um das Problem zu lösen
新建一个 loadable.vue
<template>
<index></index>
</template>
<script>
import LoadingComponent from './load.vue' // LoadingComponents是 live.vue为获取前展示的内容
export default {
components: {
index: () => ({
component: import('@/view/live/live.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
}
}
</script>
然后修改router.js
export default new Router({
routes: [
{
path: '/live',
name: 'live',
component: import('loadable.vue')
}
]
})Eine solche minimalistische asynchrone Vue-Funktion ist abgeschlossen
Verwandte Empfehlungen:
Wie VSCode Vue-Komponenten und Js-Module einführt
Das obige ist der detaillierte Inhalt vonEine kurze Analyse der asynchronen Komponentenfunktionen von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
