插件和中间件
学习如何从 Nuxt 2 迁移到 Nuxt Bridge 新插件和中间件。
新插件格式
您现在可以迁移到 Nuxt 3 插件 API,该 API 的格式与 Nuxt 2 略有不同。
插件现在只接受一个参数(nuxtApp
)。您可以在 文档 中了解更多信息。
plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('injected', () => '我的注入函数')
// 现在可以通过 `nuxtApp.$injected` 访问
})
尽管通过
nuxtApp.vueApp
提供了兼容性接口,但您应该避免以这种方式注册插件、指令、混合或组件,而不添加您自己的逻辑以确保它们不会多次安装,否则可能会导致内存泄漏。新中间件格式
您现在可以迁移到 Nuxt 3 中间件 API,该 API 的格式与 Nuxt 2 略有不同。
中间件现在只接受两个参数(to
,from
)。您可以在 文档 中了解更多信息。
export default defineNuxtRouteMiddleware((to) => {
if (to.path !== '/') {
return navigateTo('/')
}
})
defineNuxtRouteMiddleware
的使用不支持在中间件目录之外。definePageMeta
您还可以在 Nuxt Bridge 中使用 definePageMeta
。
您可以在配置文件中通过 macros.pageMeta
选项启用它。
nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
macros: {
pageMeta: true
}
}
})
但仅适用于
middleware
和 layout
。