Question

我正在尝试使用vue-property-decorator包实现Vue路由器的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文件中的，因此钩子是在组件导入之前注册的。

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

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

1 个答案: