Component guards not working when defined on mixins

[AgileInteractive]

Version

4.0.0-beta.9

Reproduction link

https://jsfiddle.net/ukeagtjm/

Steps to reproduce

const Mixin = {
    beforeRouteEnter(to, from, next) {
        console.log('****** Before route enter (mixin)');
        next();
    }
};

...

mixins:[Mixin]

What is expected?

beforeRouteEnter() to run and log from mixin

What is actually happening?

beforeRouteEnter() is never executed

[posva]

It wasn't intentionally removed but I will have to check a way to apply the mixins from components and its extends option

[dmitrystas]

the same for beforeRouteUpdate and beforeRouteLeave events

[n10000k]

On the same topic has anything changed with beforeEnter because I do a simple console log, it's hitting it x2 and also doesn't work properly with Vuex getters anymore, define a const within beforeEnter = game over.

[webigorkiev]

Are there any possibilities or some workaround for solving this issue?

[webigorkiev]

Router hooks like beforeRouteLeave, beforeRouteUpdate, beforeRouteEnter do not resolve in this. $options.
This can be fixed if vue-router provides a strategy for resolveMergedOptions (internalOptionMergeStrats)

app.config.optionMergeStrategies.beforeRouteEnter = mergeAsArray;
app.config.optionMergeStrategies.beforeRouteUpdate = mergeAsArray;
app.config.optionMergeStrategies.beforeRouteLeave= mergeAsArray;

If you do this in this.$options everything resolves, but still doesn't work (only the method from the component is executed, not from the mixin)

[BARNZ]

Bummer! Ran into this issue today as well. My use-case is to have my in-component guards placed into a page mixin for easy reuse across multiple similar page components.

This worked just fine in vue router 3. Either this is simply a regression or such a use case is no longer supported? Seems odd that it would be the latter case when mixins are still a supported feature in vue 3?

[dpmango]

Also experiencing the same issue.
Moreover, seems to be beforeRouteEnter, etc also not working at component level.

For example using in App.vue console output is empty

...
  data: () => ({}),
  beforeRouteEnter(from, to, next) {
    console.log('beforeRouteEnter') // not getting triggered
    next()
  },
  computed: {
...

[LinusBorg]

@dpmango That's not supposed to work. Route guards only work when used in route components, not just any components.