使用 Vue 類別元件在 NuxtJs 專案中註冊附加掛鉤

Question

我正在建立我的第一個 NuxtJs 項目，我還使用 Vue 類別元件將我的元件編寫為類別。

應用 Vue 類別元件後，我在存取 beforeRouteEnter 元件掛鉤時遇到問題（不再被呼叫）。因此，我找到了有關在使用此程式庫時註冊附加掛鉤的文檔，但我無法弄清楚將 import 語句放置在 NuxtJs 結構中的位置。

我有這個文件（與文件相同）：

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

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

並且我希望獲得有關如何在我的 NuxtJs 專案中設定它的幫助：

// 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" },
  ],
...