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

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.

[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.

[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