Question

这已经困扰了我一段时间了。我已经搜索了很多，但仍然不知道为什么路由钩在组件中不起作用：

1。该组件是从RouterView加载的：

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

2。我已经在main.ts和My.vue中注册了钩子（以确保注册就在这里）：

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

3。该钩子甚至可以在我的路由器配置中使用：

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

使用Typescript，未在组件中触发Vue Router挂钩

1 个答案: