如何使用 TypeScript 为 Nuxt 路由添加钩子？

Question

我试图在 Nuxt 路由中加入一个钩子，这样我就可以在页面加载之前做一些魔术。但是，我似乎找不到有关如何执行此操作的 TypeScript 示例。下面的例子不起作用：

<template>
    <div class="some-css">
        {{ text }}
    </div>
</template>

<script lang="ts">
    import Vue from "vue"

    export default class MyComponent extends Vue {
        text: string = "My Component"

        beforeRouteEnter(to, from, next): void {
            console.log(`Routing from: ${ from }, to: ${ to }`)
            next()
        }
    }
</script>

<style>
    .some-css {
        color: #000000;
    }
</style>

有没有办法在这个组件中或在 Nuxt 的全局级别上使用 TypeScript 做到这一点？

Answer 1

这是我通常使用 nuxt-property-decorator 的方式：

<script>
import Vue from "vue"
import { Component } from 'nuxt-property-decorator'

@Component({
  beforeRouteUpdate(to, from) {
    // do stuff
  }
})
export default class MyComponent extends Vue {
}
</script>