javascript - Vue Router with vue-class-component: next function does not accept callback option - Stack Overflow

admin管理员组

文章数量:1289528

I'm trying to implement Vue Router's in-ponent navigation guards using the vue-property-decorator package. Underlying, vue-property-decorator relies on vue-class-ponent package. It offers a registerHooks method, allowing you to declare what methods should be treated as lifecycle hooks (instead of instance methods).

The following code works, resulting in an alert when entering the route:

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', ponent: Foo }
]);

The Router.ts file contains the hook registration as per the docs and is exactly:

import VueRouter from 'vue-router';
import { Component } from 'vue-property-decorator'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave'
]);

export const router = new VueRouter({
  mode: 'abstract'
});

The router file is imported in an App.ts file, before the ponents are imported, hence the hooks are registered before the ponents are.

However, I seem to be unable to pass in a callback to the nextmethod. Given the updated Foo ponent from above:

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');
        });
    }
}

The alert is never fired. Am I missing something, or it this a bug in the vue-class-ponent package? I should add that I'm also unable to pass the callback to the next function in the per route and global route navigation guards.

Many thanks in advance for any help, greatly appreciated!

I'm trying to implement Vue Router's in-ponent navigation guards using the vue-property-decorator package. Underlying, vue-property-decorator relies on vue-class-ponent package. It offers a registerHooks method, allowing you to declare what methods should be treated as lifecycle hooks (instead of instance methods).

The following code works, resulting in an alert when entering the route:

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', ponent: Foo }
]);

The Router.ts file contains the hook registration as per the docs and is exactly:

import VueRouter from 'vue-router';
import { Component } from 'vue-property-decorator'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave'
]);

export const router = new VueRouter({
  mode: 'abstract'
});

The router file is imported in an App.ts file, before the ponents are imported, hence the hooks are registered before the ponents are.

However, I seem to be unable to pass in a callback to the nextmethod. Given the updated Foo ponent from above:

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');
        });
    }
}

The alert is never fired. Am I missing something, or it this a bug in the vue-class-ponent package? I should add that I'm also unable to pass the callback to the next function in the per route and global route navigation guards.

Many thanks in advance for any help, greatly appreciated!

• javascript
• typescript
• vuejs2
• vue-router
• vue-class-ponents

Share Improve this question Follow edited Sep 3, 2018 at 12:09 thomaux asked Sep 3, 2018 at 11:05 thomauxthomaux 19.7k1010 gold badges8181 silver badges105105 bronze badges 1

• 4 I encountered similar problem, but thanks to your post , I see that I have to register explicitly this router hooks, so my problem has been solved. Hope you figure yours out~ – Allan Ruin Commented Sep 29, 2018 at 7:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Please move your beforeRouteEnter hook to @Component decorator

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

本文标签： javascriptVue Router with vueclasscomponent next function does not accept callback optionStack Overflow