typescript - 如何使用 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>

有没有办法在这个组件中或使用 TypeScript 在 Nuxt 的全局级别上执行此操作？

标签： typescriptvue.jsnuxt.js

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>