Zusammenfassung von 3 Möglichkeiten zum verzögerten Laden eines Vue-Routers

Kein Lazy Loading verwenden

importiere Vue von „vue“;
Router von „vue-router“ importieren;
importiere HelloWorld von „@components/HelloWorld“;
Vue.use(Router);
exportiere standardmäßig einen neuen Router({
Routen:[
	{Weg:'./',
	Name:'HalloWelt',
	Komponente: Hallo Welt
	}
]
})

Asynchrone Vue-Komponente

Komponente: auflösen=>{reuqire(['Die zu ladende Routingadresse']), auflösen)

importiere Vue von „vue“;
Router von „vue-router“ importieren;
const HelloWorld=resolve=>{erfordernis(["@/components/HelloWorld"],resolve}
Vue.use(Router);
exportiere standardmäßig einen neuen Router({
Routen:[
	{Weg:'./',
	Name:'HalloWelt',
	Komponente: Hallo Welt
	}
]
})

ES6 import()

importiere Vue von „vue“;
Router von „vue-router“ importieren;
importiere HalloWelt=()=>importiere('@/components/HelloWorld');
Vue.use('Router')
exportiere standardmäßig einen neuen Router({
	Routen:[{
	{Weg:'./',
	Name:'HalloWelt',
	Komponente: Hallo Welt
	}
	}]
})

require.ensure() von webpack

require.ensure kann Ressourcen bei Bedarf laden, einschließlich JS, CSS usw. Die erforderlichen Dateien werden separat verpackt und nicht zusammen mit der Hauptdatei.

Der erste Parameter ist ein Array, das die durch den zweiten Parameter benötigten Module angibt, die vorab geladen werden.

Die zweite ist die Callback-Funktion. Bei dieser Callback-Funktion wird die benötigte Datei in einen separaten Block gepackt und nicht zusammen mit der Hauptdatei. Auf diese Weise werden zwei Blöcke generiert. Beim ersten Laden wird nur die Hauptdatei geladen.

Der dritte Parameter ist der Fehlerrückruf.

Der vierte Parameter ist der Dateiname des separat verpackten Blocks

importiere Vue von „vue“;
Router von „vue-router“ importieren;
const HalloWelt=auflösen=>{
		erfordern.sicherstellen(['@/components/HelloWorld'],()=>{
			lösen(erfordern('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
exportiere standardmäßig einen neuen Router({
	Routen:[{
	{Weg:'./',
	Name:'HalloWelt',
	Komponente: Hallo Welt
	}
	}]
})

Zusammenfassen

Damit ist dieser Artikel über die drei Möglichkeiten des Lazy Loading von Vue-Router abgeschlossen. Weitere relevante Inhalte zum Lazy Loading von Vue-Router finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!