具有vue-class-component的Vue路由器：next函数不接受回调选项

Question

我正在尝试使用vue-property-decorator包实现Vue Router的组件内导航保护。在底层，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文件包含根据docs的挂钩注册，并且确切地是：

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文件中的，因此，挂钩是在导入组件之前注册的。

但是，我似乎无法将回调传递给nextmethod。给定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');
        });
    }
})