插件和中间件
了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。
新的插件格式
你现在可以迁移到 Nuxt 3 的插件 API,它的格式与 Nuxt 2 略有不同。
插件现在只接收一个参数(nuxtApp
)。你可以在文档中了解更多。
plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('injected', () => 'my injected function')
// 现在在 `nuxtApp.$injected` 上可用
})
虽然通过
nuxtApp.vueApp
提供了兼容接口,但你应避免通过这种方式注册插件、指令、混入或组件,除非你添加了自己的逻辑以确保它们不会被安装多次,否则可能会导致内存泄漏。新的中间件格式
你现在可以迁移到 Nuxt 3 的中间件 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
。