javascript / expert
Snippet
Daten-Prefetching vor der Navigation
Routing auf Expertenniveau beinhaltet das Abrufen essenzieller Daten, bevor der Übergang beginnt. Durch die Nutzung des beforeEach-Guards des Routers können Sie das 'Aufblitzen leerer Inhalte' verhindern und sicherstellen, dass die Komponente alle notwendigen reaktiven Daten bereit hat, bevor sie überhaupt instanziiert wird.
snippet.js
javascript
1
2
3
4
5
6
7
router.beforeEach(async (to) => {if (to.meta.requiresData) {const store = useDataStore();to.meta.preload = await fetchData(to.params.id);store.setInitialData(to.meta.preload);}});
vue
Erklärung
1
router.beforeEach(async (to) => {
Ein globaler Navigations-Guard, der den Übergang pausiert, bis das zurückgegebene Promise aufgelöst wird.
2
to.meta.preload
Anhängen der abgerufenen Daten an die Route-Metadaten für den einfachen Zugriff innerhalb des Komponentensetups.