Registrieren Sie zusätzliche Hooks im NuxtJs-Projekt mithilfe von Vue-Klassenkomponenten

Question

Ich baue mein erstes NuxtJs-Projekt und verwende auch Vue-Klassenkomponenten, um meine Komponenten als Klassen zu schreiben.

Nachdem ich eine Vue-Klassenkomponente angewendet habe, habe ich Probleme beim Zugriff auf die beforeRouteEnter Komponenten-Hooks (die nicht mehr aufgerufen werden). Daher habe ich eine Dokumentation zum Registrieren zusätzlicher Hooks bei Verwendung dieser Bibliothek gefunden, kann jedoch nicht herausfinden, wo ich die Importanweisung in der NuxtJs-Struktur platzieren soll.

Ich habe diese Datei (identisch mit der Dokumentation):

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

Und ich hätte gerne Hilfe bei der Einrichtung in meinem NuxtJs-Projekt:

// Where should I place this?
import './class-component-hooks'

Answer 1

结果非常简单：

我已将 .js 文件放入 plugins 文件夹中：

// plugins/class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

然后在我的 nuxt.config.js 文件中，我放置了这一行：

...
  plugins: [
    { src: "~/plugins/class-component-hooks.js", mode: "client" },
  ],
...