I've been pondering this issue for quite some time. Despite my extensive search efforts, I am still unable to figure out why the route-hooks are not working in my component:
1. The component is being loaded from RouterView:
<router-view class="z1" :key="$route.name" />
2. I have properly registered the hooks in main.ts and also in My.vue, ensuring they are placed before the class definition:
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate',
]);
3. Interestingly enough, the hook 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. However, the hook fails to 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();
});
}
}
If anyone has insights or solutions to offer, please do share them with me.