Pre-Navigation Data Prefetching

Snippet

Pre-Navigation Data Prefetching

Expert-level routing involves fetching essential data before the transition begins. By utilizing the router's beforeEach guard, you can prevent 'flash of empty content' and ensure that the component has all necessary reactive data ready before it is even instantiated.

snippet.js
javascript
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

Breakdown

router.beforeEach(async (to) => {

A global navigation guard that pauses the transition until the returned promise resolves.

to.meta.preload

Attaching the fetched data to the route metadata for easy access within the component setup.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Pre-Navigation Data Prefetching

Related