6

我正在尝试使用 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 文件包含按照文档的钩子注册，并且是：

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 包中的错误？我应该补充一点，我也无法将回调传递给每个路由和全局路由导航防护中的下一个函数。

非常感谢您的帮助，非常感谢！

4

1 回答 1

10

请将您的 beforeRouteEnter 钩子移动到@Component装饰器

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

于 2019-07-05T09:23:06.253 回答