Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
719media opened this Issue Apr 10, 2019 · 4 comments

Comments

Projects
None yet
2 participants
@719media
Copy link

719media commented Apr 10, 2019

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 719media changed the title vue-router current path and async component vue-router current path invalid for a short time when loading async component Apr 10, 2019

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 11, 2019

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;
    })

@posva posva closed this Apr 11, 2019

@719media

This comment has been minimized.

Copy link
Author

719media commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Member

posva commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Author

719media commented Apr 13, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.