插件现在有不同的格式,并且只接受一个参数 (nuxtApp)。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
}
export default defineNuxtPlugin((nuxtApp) => {
// now available on `nuxtApp.$injected`
nuxtApp.provide('injected', () => 'my injected function')
// You can alternatively use this format, which comes with automatic type support
return {
provide: {
injected: () => 'my injected function',
},
}
})
defineNuxtPlugin 辅助函数。nuxt.config 插件数组中删除位于 app/plugins/ 文件夹中的任何条目。此目录中顶层(以及任何子目录中的任何 index 文件)的所有文件都将自动注册。您可以通过文件名指示模式,而不是将 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')
}
}
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。