What is the purpose and use case for router.isReady() ...

[michealroberts]

After taking a deeper dive into the documentation, it seems that although the router.isReady() API seems rather self-explanatory, I am still confused by why it could be used, but also where it should be used ...

Could anyone give me a router.isReady() 101 lesson, please 🙏

[posva]

From docs:

Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. If the initial navigation already happened, the promise resolves immediately.

This is useful in server-side rendering to ensure consistent output on both the server and the client. Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL.

When the router is created it starts in a nowhere location. Depending on the environment (e.g. browser or not), it automatically picks up the location and internally runs router.push(). Until that first navigation isn't resolved, the current route is at the nowhere location (START_LOCATION). If you render your app on the server without waiting for the first navigation to be ready, it will render as if the application was nowhere, a blank page.

[gokhantaskan]

How does the router work when the app is mounted in the main.ts file?

import router from "./router";
import Root from "./Root.vue"; // It's App.vue

const app = createApp(Root);

app.use(router);

app.mount("#app");

In my Root.vue component, I initialize the user by fetching the data via the fetch API in the onBeforeMount hook. I do the same thing with the router.beforeEach function, but I check to see if the user value is valid to fetch the user data when necessary.

In the root component, the RouterView is rendered only if the user is set correctly based on a specific condition.

In both Root.vue and router.beforeEach, the user is null.

So there are two related questions:

1. What is START_LOCATION you defined above? (as I can see, the root component cannot block the router from being mounted)
2. Can I use isReady() to block the first router push so I can fetch the user? (block the router)

I tried nextTick and setTimeout in the auth guard, but none of them worked. isReady seems legit, but I don't know how to implement.

[gokhantaskan]

I immediately tested it, and it worked:

// Root.vue

onBeforeMount(async () => {
  await router.isReady();

  // The user data is valid
...
});

I can't block the router but can block the root component, which is a good solution.