插件和中间件
了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。
插件
插件现在有了不同的格式，只接受一个参数（nuxtApp）。
export default (ctx, inject) => {
inject('injected', () => '我的注入函数')
}
export default defineNuxtPlugin(nuxtApp => {
// 现在可以通过 `nuxtApp.$injected` 访问
nuxtApp.provide('injected', () => '我的注入函数')
// 你还可以使用这种格式，它具有自动类型支持
return {
provide: {
injected: () => '我的注入函数'
}
}
})
迁移
- 将你的插件迁移为使用
defineNuxtPlugin辅助函数。 - 移除位于
plugins/文件夹中的nuxt.config插件数组中的任何条目。此目录顶部的所有文件（以及任何子目录中的索引文件）将自动注册。你可以通过文件名而不是设置mode为client或server来指明这一点。例如，~/plugins/my-plugin.client.ts仅在客户端加载。
路由中间件
路由中间件有不同的格式。
export default function ({ store, redirect }) {
// 如果用户未认证
if (!store.state.authenticated) {
return redirect('/login')
}
}
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.authenticated) {
return navigateTo('/login')
}
})
与 Nuxt 2 类似，放置在 ~/middleware 文件夹中的路由中间件会自动注册。然后，您可以在组件中按名称指定它。但是，这样做是通过 definePageMeta 而不是作为组件选项。
navigateTo 是多个路由辅助函数之一。
迁移
- 将你的路由中间件迁移为使用
defineNuxtRouteMiddleware辅助函数。 - 任何全局中间件（例如在你的
nuxt.config中）可以放置在~/middleware文件夹中，并带有.global扩展名，例如~/middleware/auth.global.ts。