CODEWITHSUNDEEP
javascripttypescriptvue.jsvue-componentvue-router
shuangwhywhy
shuangwhywhy

Reputation: 5625

Vue Router hooks not triggered in component, using Typescript

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 component:

1. The component 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',
    component: 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?

Upvotes: 3

Views: 2993

Answers (1)

Nikita
Nikita

Reputation: 451

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 {}

Upvotes: 7

Related Questions