vue-router current path invalid for a short time when loading async component

[719media]

Version

3.0.3

Reproduction link

https://codesandbox.io/s/y32jkmjr7v

Steps to reproduce

Using vue and vue-router, create a route that requires a component (componentAsync) that is async loaded from the main component (componentApp).

Do something that uses router.push or router.go inside of mounted() of the componentApp without a path or name.
For example, router.push({query: { test: 'foo' }})

The redirected route will just use path: '/' instead of the actual path you used to initially hit the page.

For example, if you hit domain.com/about, you will wind up at domain.com/?test=foo, instead of domain.com/about?test=foo

What is expected?

vue-router would use the current window location

What is actually happening?

vue-router is using /

---

This is because the async component makes the confirmTransaction callback take longer than the mounted() call to router.push, so the route inside router is still the one with the wrong path.

[posva]

This is working as expected, we need to wait to fetch the component for guards.
Use onReady to make sure code is executed when the router is ready:

this.$router.onReady(() => {
      this.firstName = this.$route.name;
    })

[719media]

Thanks for the review. I disagree with the reasoning, as a developer, I would not want to have to think about additional criteria. I want to just be able to say $router.push(), not "Can I say $router.push yet, or do I need to wait for onReady"? This means potentially I need to wrap any $router.push inside of a onReady() if I want to be 100% safe, which just seems... lame. But, I understand that there are reasons beyond my understanding for your decision.

[posva]

it's because you are doing it outside of a view component, in the main App which is mounted right away, so it's normal, we cannot delay mounting App

[719media]

Sure, but https://github.com/vuejs/vue-router/pull/2704/files#diff-cae914e458ed0158d4acf96517a2e39bL52

the starting route that represents the initial state

may as well actually reflect the real starting state (window.location.pathname) instead of just /. The associated PR is not delaying the app mount, it's just merely providing a correct path, fixing the issue completely. I would hope for an explanation as to how the PR has any downsides.

[esynaps]

Same very annoying problem. The current route is still invalid for a while, even after the execution of the beforeEach hook. What does the router do until onReady?

[Tofandel]

Well apparently you can delay mounting the app without any issue

Vue.use(router);

const v = new Vue({
  router,
  render: //...
});

router.onReady(() => {
  v.$mount('#app');
});

Just don't wrap the new vue or the router will never be ready and none of the code will run