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

watcher for a route param is called when a user leaved the route #2291

Closed
yamacent opened this issue Oct 2, 2020 · 6 comments
Closed

watcher for a route param is called when a user leaved the route #2291

yamacent opened this issue Oct 2, 2020 · 6 comments
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@yamacent
Copy link

yamacent commented Oct 2, 2020

Version

3.0.0

Reproduction link

https://jsfiddle.net/posva/yvegmca7/

SFC (no vue router)

Steps to reproduce

  1. click foo1 link in result tab
  2. click bar link in result tab
  3. "fetch foo: ", undefined will be shown in console

same code with Vue v2.x do not show "fetch foo: ", undefined.
https://jsfiddle.net/s74dutkm/1/

What is expected?

watcher for a route param is not called when a user leaved the route (same as v2)

What is actually happening?

watcher for a route param is called when a user leaved the route (watcher gets undefined as the route param)


it may be caused by this breaking change.

I don't think it's natural that we need to consider the possibility a route param is undefined in a route which requires the param.

@posva posva marked this as a duplicate of #2200 Oct 2, 2020
@posva posva closed this as completed Oct 2, 2020
@posva posva reopened this Oct 2, 2020
@posva
Copy link
Member

posva commented Oct 2, 2020

This is a regression of #1603

@posva posva added the 🐞 bug Something isn't working label Oct 2, 2020
@posva posva marked this as not a duplicate of #2200 Oct 2, 2020
@yyx990803
Copy link
Member

As a workaround, use a post flush watcher:

watch: {
  "$route.params.fooId": {
    handler: "fetch",
    flush: "post"
  }
}

@henribru
Copy link

Are there any plans to fix this issue? The workaround works okay for your own watchers, but I'm running into this with watchers in external libraries as well, in which case I can't affect how they flush.

@johannesstricker
Copy link

Looks like this still isn't fixed, am I right? Any plans to fix this?

@zenflow
Copy link

zenflow commented Jun 14, 2022

As a workaround, use a post flush watcher:

watch: {
  "$route.params.fooId": {
    handler: "fetch",
    flush: "post"
  }
}

@yyx990803 Does flush: "post" restore vue2 behavior? Or how does that compare to vue2 behavior? I can't find much documentation on this breaking change.. thanks for any insight you can give!

@Akryum
Copy link
Member

Akryum commented Jul 27, 2022

Looks like Vue 2.7 has the same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants