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

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

0 голосов
/ 03 сентября 2018

Я пытаюсь реализовать встроенные средства защиты навигации в 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? Я должен добавить, что я также не могу передать обратный вызов следующей функции для каждого маршрута и глобальным охранникам навигации по маршруту.

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

1 Ответ

0 голосов
/ 05 июля 2019

Пожалуйста, переместите хук beforeRouteEnter на @Component Декоратор 

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