插件和中间件
了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。
插件
插件现在采用不同的格式,仅接受一个参数(nuxtApp
)。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
})
export default defineNuxtPlugin(nuxtApp => {
// 现在可以通过 `nuxtApp.$injected` 访问
nuxtApp.provide('injected', () => 'my injected function')
// 您也可以使用这种格式,它会自动提供类型支持
return {
provide: {
injected: () => 'my injected function'
}
}
})
迁移
- 将您的插件迁移到使用
defineNuxtPlugin
辅助函数。 - 从
nuxt.config
的插件数组中移除位于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
。