插件和中间件
学习如何从Nuxt 2迁移到Nuxt 3的插件和中间件。
插件
插件现在采用了不同的格式，仅接受一个参数（nuxtApp）。
export default (ctx, inject) => {
inject('injected', () => '我的注入函数')
})
export default defineNuxtPlugin(nuxtApp => {
// 现在可以通过`nuxtApp.$injected`访问
nuxtApp.provide('injected', () => '我的注入函数')
// 您也可以使用这种格式，它带有自动类型支持
return {
provide: {
injected: () => '我的注入函数'
}
}
})
迁移
- 将您的插件迁移到使用
defineNuxtPlugin辅助函数。 - 从
nuxt.config的插件数组中移除位于plugins/文件夹中的任何条目。plugins/目录顶层中的所有文件（以及任何子目录中的index文件）都将被自动注册。您无需通过设置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。