Vue хук beforeRouteLeave не срабатывает из mixin или из базового компонента

Рейтинг: 2Ответов: 1Опубликовано: 10.04.2023

Есть необходимость на некоторых компонентах уведомлять о не сохранённых пользователем изменениях перед уходом со страницы. Использование beforeRouteLeave прямо в компонентах решает проблему, но хотелось бы использовать его как-то глобально, чтобы не описывать его каждый раз в каждом компоненте, где это необходимо.

beforeRouteLeave не срабатывает из mixin или из базового компонента. При этом, другие хуки работают из mixin.

Пробовал фабричную функцию:

export const createRouteLeaveMixin = () => ({
    beforeRouteLeave(to, from, next) {
        alert('Сработал routerMixins - beforeRouteLeave');

        // next();
    },
});

Пробовал использовать beforeRouteLeave в mixin и таким образом:

export default {
    created() {
        this.beforeRouteLeave = (to, from, next) => {
            alert('beforeRouteLeave сработал');
        };
    }
}

Ну и пробовал просто использовать хук. В самом компоненте beforeRouteLeave отсутствует, так что они не могут перекрывать друг-друга с mixin.

javascript vue.js
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

В миксине можно пробовать ещё вот так


export default {
    created(){
        let route = this.$route.matched[0];
        if(!route) return;
        route.leaveGuards = new Set([function(to, from, next){ 
            alert('beforeRouteLeave сработал')
            next();
        }]);
    }
}