带有 vue-class-component 的 Vue 路由器：下一个函数不接受回调选项

Question

我正在尝试使用 vue-property-decorator 包来实现 Vue Router 的 in-component navigation guards。底层，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 文件包含按照the 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');
        });
    }
})