javascript - 使用 Typescript 未在组件中触发 Vue Router Hook

Question

这让我困惑了一段时间。我搜索了很多，但仍然不知道为什么路由 Hook 在组件中不起作用:

<强>1。从 RouterView 加载组件:

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

<强>2。我已经在 main.ts 和 My.vue 中注册了钩子(Hook)——在类定义之前(以确保注册就在这里):

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

<强>3。该 Hook 甚至可以在我的路由器配置中使用:

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

<强>4。但它在我的组件中不起作用:

@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();
        });
    }
}

那么有人可以帮我吗？

Answer 1

应该工作:

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