如何在Nuxt类组件中正确键入导航保护

Question

我有一个带有Typescript和beforeRouteLeave钩子的Nuxt类组件，如下所示：

import { Component, Vue } from "nuxt-property-decorator"
@Component
export default class MyComponent extends Vue {
beforeRouteLeave (_to, _from, next) {
this.foo()
next()
}
foo () { console.log("navigation guard triggered") }
}

由于_to, _from, next implicitly have an any type。因此，我尝试将该方法键入Vue RouterNavigationGuard，如下所示：

import { Component, Vue } from "nuxt-property-decorator"
import type { NavigationGuard } from "vue-router"
@Component
export default class MyComponent extends Vue {
beforeRouteLeave: NavigationGuard = function (this: MyComponent, to, _from, next) { // without typing `this` the next line throws an error
this.foo()
next()
}
foo () { console.log("navigation guard triggered") }
}

TS错误已经消失，但钩子不会在应用程序中触发。我做错了什么？

Answer 1

1. 您应该在自定义插件中注册registerHooks生命周期，并将其注册到nuxt.config.ts中

// plugin/main.ts
import 'vue-class-component/hooks' // auto registerHooks
// nuxt.config.ts
import type { NuxtConfig } from '@nuxt/types';
const config: NuxtConfig = {
plugins: [ { src: '~/plugins/main.ts' } ]
// ignore other...
};
export default config;

2. 根据文档，beforeRouteLeave有两个或三个参数，而不是四个，所以只要修复代码，它就会正常工作

// MyComponent.vue
import { Component, Vue } from "nuxt-property-decorator"
import { NavigationGuardNext, Route } from 'vue-router';
@Component
export default class MyComponent extends Vue {  
beforeRouteLeave(to: Route, from: Route, next: NavigationGuardNext) {
// will call the foo() function
this.foo()
next()
}
foo () { console.log("navigation guard triggered") }
}

3. 如果VSCode仍然显示缺少类型，则可以创建shims-vue.d.ts来帮助Typescript理解该类型。这是医生