如何使用Vue类组件在NuxtJs项目中注册附加挂钩

Question

我正在构建我的第一个NuxtJs项目，我还使用Vue class Component将我的组件编写为类。

在应用Vue类组件后，我在访问beforeRouteEnter组件钩子时遇到了问题(它不再被调用(。所以我在使用这个库时找到了关于注册传统钩子的文档，但我不知道在NuxtJs结构中把import语句放在哪里。

我有这个文件(与文档相同(：

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