beforeRouterEnter next function callback does not follow the same lifecycle pattern that Vue does

[itmayziii]

Version

3.0.1

Reproduction link

https://codesandbox.io/embed/n48n7jpq6j

Steps to reproduce

1. Add a beforeRouterEnter function that has a callback to a component
2. Make the same component from step 1 use a mixin that also uses beforeRouteEnter with a callback
3. The callback in the component will be called before the callback from the mixin which is inconsistent with how Vue handles the rest of the lifecycle methods.

Note that the mixin will actually be called before the component (expected behavior) but the callback in the mixin will not be (unexpected.)

What is expected?

The mixin beforeRouteEnter callback should be called before the components.

What is actually happening?

The components beforeRouterEnter callback is called before the mixins.

[posva]

Yeah, it's inconsistent. Why would this be a problem though? making one of the callbacks depends on another one coming from a mixin is very implicit

[itmayziii]

In our case the mixin is handling common logic between different components (which I believe is the main use case for them.) This common logic does some setup in beforeRouteEnter and does some teardown in beforeRouteLeave. I would use the created lifecycle method but there is no guarantee the router will be going to a new component entirely, it may re-use the current one. In these cases where it re-uses the current component it's not possible to do common setup tasks (that rely on the vue instance) since the component is called first.

If it is acknowledged that this is indeed something Vue router wants to fix I would gladly volunteer to look at the issue.

[posva]

okay, I don't think it's a good idea to keep such things in a mixin, but I would make it more consistent to have it in the right order and it will be great if you are willing to help on this! Please, do!