javascript - Vue Router hooks not triggered in component, using Typescript - Stack Overflow

admin管理员组

文章数量:1430125

This has been puzzling me for a while. I have searched quite a bit, but still have no idea, why the route-hooks doesn’t work in ponent:

1. The ponent is loaded from RouterView:

<router-view class="z1" :key="$route.name" />

2. I have registered the hooks in main.ts, and also in My.vue -- BEFORE the class definition (to ensure the registration is right here):

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

3. The hook even works in my router config:

{
    path: '/my',
    name: 'my',
    ponent: My,
    // beforeEnter: (to: Route, from: Route, next: any): void => {
    //  console.log('It works!’);  // It works here!
    // }
},

4. But it doesn’t work in my Component:

@Comp()
export default class My extends Vue {
    public beforeRouteEnter (to: Route, from: Route, next: any): void {
        debugger;       // not triggered!
        next((vm: Vue.Component) => {
            debugger;   // not triggered!
            next();
        });
    }
}

So could anyone help me with that?

This has been puzzling me for a while. I have searched quite a bit, but still have no idea, why the route-hooks doesn’t work in ponent:

1. The ponent is loaded from RouterView:

<router-view class="z1" :key="$route.name" />

2. I have registered the hooks in main.ts, and also in My.vue -- BEFORE the class definition (to ensure the registration is right here):

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

3. The hook even works in my router config:

{
    path: '/my',
    name: 'my',
    ponent: My,
    // beforeEnter: (to: Route, from: Route, next: any): void => {
    //  console.log('It works!’);  // It works here!
    // }
},

4. But it doesn’t work in my Component:

@Comp()
export default class My extends Vue {
    public beforeRouteEnter (to: Route, from: Route, next: any): void {
        debugger;       // not triggered!
        next((vm: Vue.Component) => {
            debugger;   // not triggered!
            next();
        });
    }
}

So could anyone help me with that?

• javascript
• typescript
• vue.js
• vue-ponent
• vue-router

Share Improve this question Follow edited Jul 30, 2019 at 15:21 shuangwhywhy asked Jul 5, 2019 at 10:57 shuangwhywhyshuangwhywhy 5,62522 gold badges2121 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

should be working:

@Comp({
  beforeRouteEnter (
    to: Route,
    from: Route,
    next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
  ): void {
       next(vm => {});
  }
})
export default class My extends Vue {}

本文标签： javascriptVue Router hooks not triggered in componentusing TypescriptStack Overflow