插件和中间件
了解如何将 Nuxt 2 中的插件和中间件迁移到 Nuxt 3。
插件
插件现在具有不同的格式,并且只接受一个参数 (nuxtApp
)。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
})
迁移
- 迁移您的插件以使用
defineNuxtPlugin
辅助函数。 - 删除
nuxt.config
中位于plugins/
文件夹中的任何插件数组条目。此目录中顶层的所有文件(以及任何子目录中的任何索引文件)都将自动注册。无需将mode
设置为client
或server
,您可以在文件名中指示这一点。例如,~/plugins/my-plugin.client.ts
仅在客户端加载。
路由中间件
路由中间件具有不同的格式。
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}
与 Nuxt 2 非常相似,放置在 ~/middleware
文件夹中的路由中间件会自动注册。然后,您可以通过名称在组件中指定它。但是,这是使用 definePageMeta
完成的,而不是作为组件选项。
navigateTo
是众多路由辅助函数之一。
迁移
- 迁移您的路由中间件以使用
defineNuxtRouteMiddleware
辅助函数。 - 任何全局中间件(例如在您的
nuxt.config
中)都可以放置在您的~/middleware
文件夹中,并带有.global
扩展名,例如~/middleware/auth.global.ts
。