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

[yamacent]

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]

This is a regression of #1603

[yyx990803]

As a workaround, use a post flush watcher:

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

[henribru]

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]

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

[zenflow]

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]

Looks like Vue 2.7 has the same issue