---
title: "插件与中间件"
description: "了解如何将 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/bridge/plugins-and-middleware"
---
# 插件与中间件

> 了解如何将 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。

## 新的插件格式

你现在可以迁移到 Nuxt 3 的插件 API，格式与 Nuxt 2 略有不同。

插件现在只接受一个参数（`nuxtApp`）。你可以在[文档](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins)中了解更多信息。

```ts [app/plugins/hello.ts]
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('injected', () => 'my injected function')
  // 现在可通过 `nuxtApp.$injected` 访问
})
```

::note
如果你想在插件中使用新的 Nuxt 组合式函数（例如 [`useNuxtApp`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-nuxt-app) 或 `useRuntimeConfig`），则需要使用 `defineNuxtPlugin` 辅助函数定义这些插件。
::

::warning
虽然通过 `nuxtApp.vueApp` 提供了兼容接口，但应避免通过这种方式注册插件、指令、混入或组件，除非你添加了自己的逻辑以确保它们不会被多次安装，否则可能导致内存泄漏。
::

## 新的中间件格式

你现在可以迁移到 Nuxt 3 的中间件 API，格式与 Nuxt 2 略有不同。

中间件现在只接受两个参数（`to`、`from`）。你可以在[文档](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/middleware)中了解更多信息。

```ts twoslash
export default defineNuxtRouteMiddleware((to) => {
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
```

::important
`defineNuxtRouteMiddleware` 的使用不支持在 `app/middleware` 目录之外。
::

## definePageMeta

你也可以在 Nuxt Bridge 中使用 [`definePageMeta`](https://nuxt.zhcndoc.com/docs/4.x/api/utils/define-page-meta)。

你可以在配置文件中通过 `macros.pageMeta` 选项启用它

```ts [nuxt.config.ts]
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})
```

::note
但仅适用于 `middleware` 和 `layout`。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.