Subscribe on changes!

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

avatar
Oct 2nd 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.

avatar
Oct 2nd 2020
avatar
Oct 8th 2020

As a workaround, use a post flush watcher:

watch: {
  "$route.params.fooId": {
    handler: "fetch",
    flush: "post"
  }
}
avatar
Nov 10th 2021

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.

avatar
Apr 25th 2022

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

avatar
Jun 14th 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!

avatar
Jul 27th 2022

Looks like Vue 2.7 has the same issue

avatar
May 12th 2023

This does not seem to have been resolved, is there plans to resolve this? I realize there is this workaround but in a large application this is a fairly breaking change.

avatar
May 16th 2023

It was fixed in https://github.com/vuejs/core/commit/78c199d6dbe8931520b75d8bfe0d49366a06922a, it seems like? The jsfiddle production link (which gets the latest version of vue via unpkg) in the issue description no longer shows the described behaviour

avatar
May 16th 2023

https://github.com/vuejs/core/issues/7030 seems like essentially the same issue to me and it links a reproduction where this still occurs.