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