waiting for a page to load resources with vue-router - equivalent to window.onload?

const { createApp, reactive, computed, defineAsyncComponent } = Vue;
const { createRouter, createWebHashHistory } = VueRouter;

/* ------------ Asset loader with caching ------------ */
const cache = new Map();

async function loadAsset(url) {
  if (cache.has(url)) return cache.get(url);
  const promise = new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
  cache.set(url, promise);
  return promise;
}

async function loadAssets(urls = []) {
  await Promise.all(urls.map(loadAsset));
}

function preloadPage(assets) {
  loadAssets(assets);
}

/* ------------ Simple loading store ------------ */
const loadingState = reactive({ isLoading: false });
function useLoadingStore() {
  return {
    get isLoading() { return loadingState.isLoading; },
    start() { loadingState.isLoading = true; },
    stop() { loadingState.isLoading = false; },
  };
}

/* ------------ Loader component ------------ */
const Loader = {
  template: `
    <div v-if="isLoading" class="loader">
      <div class="spinner"></div>
    </div>`,
  setup() {
    const store = useLoadingStore();
    return { isLoading: computed(() => store.isLoading) };
  }
};

/* ------------ Page Components ------------ */

const HomePage = defineAsyncComponent(() =>
  Promise.resolve({
    template: `
      <div class="page">
        <h1>Home</h1>
        <p>Welcome to the demo. Navigate to <strong>Gallery</strong> to see big many images lazy-load.</p>
        <p>
          <a href="#"
             @mouseenter="preloadGallery"
             @click.prevent="goGallery">
            Go to Gallery (preloads on hover)
          </a>
        </p>
        <img src="https://floatingworld.com/wp-content/uploads/2023/02/Sample-jpg-image-30mb-16.jpg" alt="Big Image 1" width="100%" />
      </div>`,
    setup() {
      const router = VueRouter.useRouter();
      function preloadGallery() {
        preloadPage(galleryAssets);
      }
      function goGallery() { router.push('/gallery'); }
      return { preloadGallery, goGallery };
    },
  })
);

const galleryAssets = [
  'https://floatingworld.com/wp-content/uploads/2023/02/Sample-jpg-image-30mb-16.jpg',
  'https://media.gettyimages.com/id/84047672/nl/foto/london-rachel-stevens-launches-the-new-virgin-media-50mb-broadband-service-at-the-hospital-club.jpg?s=2048x2048&w=gi&k=20&c=wa_NSN4Tl-3p4NEtvweN4hkVjEUJJk9_1GiEQQ9efA4=',
  'https://upload.wikimedia.org/wikipedia/commons/e/e6/Clocktower_Panorama_20080622_20mb.jpg'
];

const GalleryPage = {
  template: `
    <div class="page">
      <h1>Gallery</h1>
      <p>These high-resolution images are lazy loaded with caching.</p>
      <img v-for="img in images" :key="img" :src="img" width="50%"/>
    </div>`,
  setup() {
    const images = galleryAssets;
    return { images };
  },
};

const AboutPage = {
  template: `
    <div class="page">
      <h1>About</h1>
      <p>This example demonstrates route-level lazy loading and image caching in Vue.</p>
    </div>`,
};

/* ------------ Router ------------ */
const routes = [
  { path: '/', name: 'Home', component: HomePage, meta: { assets: ['https://floatingworld.com/wp-content/uploads/2023/02/Sample-jpg-image-30mb-16.jpg'] } },
  { path: '/gallery', name: 'Gallery', component: GalleryPage, meta: { assets: galleryAssets } },
  { path: '/about', name: 'About', component: AboutPage },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach(async (to, from, next) => {
  const store = useLoadingStore();
  store.start();
  try {
    if (to.meta.assets?.length) await loadAssets(to.meta.assets);
    next();
  } catch (e) {
    console.error('Asset load failed', e);
    next(false);
  } finally {
    store.stop();
  }
});

/* ------------ App ------------ */
const App = {
  components: { Loader },
  template: `
    <div>
      <Loader />
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/gallery">Gallery</router-link>
        <router-link to="/about">About</router-link>
      </nav>
      <router-view />
    </div>`
};

/* ------------ Mount ------------ */
createApp(App).use(router).mount('#app');

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #fafafa;
}

nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #42b983;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a.router-link-active {
  text-decoration: underline;
}

.loader {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #42b983;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

.page {
  padding: 1rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vue Lazy-Loaded SPA Example</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="app"></div>

  <!-- Vue + Router (already loaded in your sandbox) -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js"></script>

  <!-- Your app -->
  <script src="app.js"></script>
</body>
</html>