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

Async support and navigating prop #3369

Closed
jods4 opened this issue Nov 10, 2020 · 2 comments
Closed

Async support and navigating prop #3369

jods4 opened this issue Nov 10, 2020 · 2 comments

Comments

@jods4
Copy link

jods4 commented Nov 10, 2020

What problem does this feature solve?

It'd be nice if the router was able to handle async setup() components.
Navigation would start, and router would wait for setup to resolve before mounting the new route.
I handled this before by having <Suspense> around the router view but with recent changes vuejs/core#2099 this doesn't work anymore.

You can say that using beforeRouteEnter is an alternative, e.g. to load data, but it results in really convoluted/bad code because setup must return an object with all state within, so beforeRouteEnter must mutate everything because the state has to live in its outer scope.

To round up async support, it would also be nice if the router had a reactive property indicating a navigation is in progress. This enables us to easily show feedback in UI whenever async navigation happens, which includes async components loading, async router hooks, async setup.

What does the proposed API look like?

For async setup support: no API, it should just work.
For the property. isNavigating ref property on the router.

@posva
Copy link
Member

posva commented Nov 10, 2020

async setup cannot be integrated into navigation because it is executed after the navigation is finished. This would be feasible with a new different RouterView component but this should go through an RFC instead as there is so much more to cover like integration with the existing RouterView

To round up async support, it would also be nice if the router had a reactive property indicating a navigation is in progress. This enables us to easily show feedback in UI whenever async navigation happens, which includes async components loading, async router hooks, async setup.

That can be added by hooking into router.beforeEach, router.afterEach, and router.onError to save the state of the current navigation in a way that is convenient. If you want to propose something, like isNavigating, it's also worth going through an RFC because there are different ways of exposing this information

FYI: the router should currently expose the necessary information to create what you need as I know Nuxt integrated it.
Also, this is Vue Router's repository, not Vue Router Next 😉

@posva posva closed this as completed Nov 10, 2020
@jods4
Copy link
Author

jods4 commented Nov 10, 2020

Sorry wrong repo, indeed. Read Vue Router 3 on the front-page a little too quickly.

That can be added by hooking into router.beforeEach, router.afterEach, and router.onError to save the state of the current navigation in a way that is convenient.

Yes, that's what I'm doing in the meantime. I thought other frameworks have a isNavigating concept built-in and that's quite convenient. It can also encapsulated in a helper function so I don't care more than that if you don't think it's a good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants