Vue Router с vue-class-component: следующая функция не принимает опцию обратного вызова

Question

Я пытаюсь реализовать встроенные средства защиты навигации Vue Router с помощью пакета vue-property-decorator. В основе vue-property-decorator лежит пакет vue-class-component. Он предлагает registerHooks метод, позволяющий вам объявить, какие методы следует рассматривать как хуки жизненного цикла (вместо методов экземпляра).

Следующий код работает, в результате чего появляется предупреждение при входе в маршрут:

import { Component, Vue } from 'vue-property-decorator';
import { router } from './Router';

@Component({
    template: '<div></div>'
})
export class Foo extends Vue {

    beforeRouteEnter(to, from, next){
        alert('Entering Foo');
        next();
    }
}

router.addRoutes([
    { path: '/foo', component: Foo }
]);

Файл Router.ts содержит регистрацию перехвата в соответствии с документами и точно:

import VueRouter from 'vue-router';
import { Component } from 'vue-property-decorator'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave'
]);

export const router = new VueRouter({
  mode: 'abstract'
});

Файл маршрутизатора импортируется в файл App.ts перед импортом компонентов, поэтому хуки регистрируются до того, как компоненты.

Тем не менее, я не могу передать обратный вызов next метод. Учитывая обновленный Foo компонент сверху:

import { Component, Vue } from 'vue-property-decorator';
import { router } from './Router';

@Component({
    template: '<div></div>'
})
export class Foo extends Vue {

    beforeRouteEnter(to, from, next){
        next(vm => {
            alert('Entering Foo');
        });
    }
}

Предупреждение никогда не срабатывает. Я что-то упустил, или это ошибка в пакете vue-class-component? Я должен добавить, что я также не могу передать обратный вызов следующей функции для каждого маршрута и глобальным охранникам навигации по маршруту.

Заранее большое спасибо за любую помощь, очень признателен!

Answer 1

Переместите хук beforeRouteEnter в @Component декоратор

@Component({
    template: '<div></div>',
    beforeRouteEnter(to, from, next){
        next(vm => {
            alert('Entering Foo');
        });
    }
})