Incorrect triggering of beforeRouteUpdate when using router-view key

[brophdawg11]

Version

3.1.3

Reproduction link

https://codepen.io/brophdawg11/pen/bGbXaXW

Steps to reproduce

I'm slightly confused by the wording in the documentation and am seeing what I think is either incorrect behavior, or expected behavior that is not explicit enough in the docs regarding when beforeRouteEnter/beforeRouteUpdate would fire.

The docs state:

beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
  },

And this seems correct. My confusion comes from the statement "but this component is reused in the new route". What about in a scenario with <router-view :key="$route.path"> in which we may navigate from /user/1 to /user/2 but we want to animate between the two and thus we force a new component creation (assuming the route path is /user/:id).

If you look at the linked codepen console when navigating between the two routes, the component instance is destroyed and a new one created, but it still calls beforeRouteUpdate

Which of the following should be correct in this scenario?

• beforeRouteEnter is called on the destination component because it is a net-new component, even though we're still within the same "route". If so, I think this would be need a bug fix.
• beforeRouteUpdate is called on the destination component because even though we use a new component, we remained in the same /user/:id "route". If this is the case, I think vue-router is functioning correctly but the docs are misleading about beforeRouteUpdate being called when the component is reused.

What is expected?

From the docs are they stand, it seems to me that beforeRouteEnter should be called on the new component when using a <router-view> :key prop that causes a new component instance to be created. This also is more intuitive IMO because the component is not updating in place.

What is actually happening?

beforeRouteUpdate is being called

---

We found this when trying to figure out the best place to show/hide our loaders during page to page transitions. Initially it seemed like the next callback of beforeRouteEnter might be the best place because it triggers after the new DOM was patched.

[posva]

The behavior is indeed correct, it's not about the component instance being reused but about the route record being reuse. Having a key or not on the component instance doesn't change anything

[afwn90cj93201nixr2e1re]

From the docs are they stand, it seems to me that beforeRouteEnter should be called on the new component

beforeRouteEnter = before Route enter.

also, @posva why beforeRouteUpdate/page updating not calling when we work at dev hot reaload? vue reset components data and other stuff sometimes when we change file, but router doesn't something.

[brophdawg11]

Thanks for clarifying!