Expose a function to resolve a RouteLocationNormalized into a RouteLocationNormalizedLoaded that can be used by `<RouterView/>`

[7architect]

Version

4.0.10

Reproduction link

https://codesandbox.io/s/elastic-kilby-3461t?file=/src/pages/dialog.vue

Steps to reproduce

1 - Define two async routes

import dialog from "./pages/dialog.vue";

const routes = [
  {
    name: "index",
    path: "/",

    component: () => import("./pages/main.vue")
  },
  {
    name: "dialog",
    path: "/dialog",
    // uncomment to fix
    // component: dialog,
    component: () => import("./pages/dialog.vue")
  }
];

2 - Use manually route resolve via "router.resolve"

    const router = useRouter();

    const dialogRoute = shallowRef();
    const mainRoute = shallowRef({ matched: [] });
    router.beforeResolve(() => {
      // ... if (true === route.meta.dialog)
      dialogRoute.value = router.resolve("/dialog");
      // ... some logic for read last visited route name from localStorage and resolve it
      // id "background"
      mainRoute.value = router.resolve("/");
    });

3 - Display routes via router-view slot api

  <router-view :route="mainRoute" v-slot="{ Component }">
    <template v-if="Component">
      <suspense>
        <component :is="Component" />
        <template #fallback> loading </template>
      </suspense>
    </template>
  </router-view>

  <router-view :route="dialogRoute" v-slot="{ Component }">
    <template v-if="Component">
      <suspense v-if="Component">
        <Dialog>
          <component :is="Component" />
        </Dialog>
      </suspense>
    </template>
  </router-view>

What is expected?

"dialogRoute" displayed when route assigned as async component

What is actually happening?

"dialogRoute" does not displayed and Vue throws warn

For fix "/" route shouldn't be asynchronous (uncomment rows in main.js to see fix)

[Vue warn]: Invalid VNode type: undefined (undefined)
at <Component onVnodeUnmounted=fn ref=Ref>
at
at <RouterView route= {fullPath: "/dialog", path: "/dialog", query: Object, hash: "", name: "dialog"…}>
at

[7architect]

Found solution:
wrap all async routes using defineAsyncComponent

defineAsyncComponent({
  loader: () => import("./pages/main.vue")
})

[posva]

Don't pass async components to vue routes, only lavy imports (as mentioned in docs)

the route prop of <RouterView> accepts a special type of RouterLocationNormalized -> RouterLocationNormalizedLoaded. It contains all dynamic imports resolved, you can safely create a function that goes through the matched array and awaits for all the components that need to be displayed by replacing the original value of the component. Something like this, but generalized:

const loc = router.resolve('/somwhere')
loc.matched[0].components.default = await loc.matched[0].components.default()

It needs some extra checks depending on the kind of repos used by the project. You can find a more complex solution at https://github.com/vuejs/vue-router-next/blob/master/src/navigationGuards.ts#L311-L315.

Maybe this could be added as a standalone function that is tree shakable as most projects will never need it