middleware 目录,Nuxt提供了一个可定制的路由中间件框架,可以在整个应用程序中使用,非常适合在导航到特定路由之前提取想要运行的代码。
//middleware -> search.js
export default defineNuxtRouteMiddleware((to,from)=>{
const { type,page } = to.params
const { keyword } = to.query
if(!keyword){
return abortNavigation("搜索关键词不能为空")
}
if(!(["course","column"].includes(type)) || isNaN(+page)){
return abortNavigation("页面不存在")
}
})
//index.vue
definePageMeta({
middleware:["search"]
})
//eg2
//中间件可以获取目标路由 to 和来源路由 from,还有两个很常用的工具方法:
abortNavigation(error):跳过,留在 from;
navigateTo(route):指定跳转目标。
export default defineNuxtRouteMiddleware((to, from) => {
if (to.params.id === '1') {
return abortNavigation()
}
return navigateTo('/')
})
//全局中间件
//命名时带上 global
middleware -> search.global.js
另外,中间件全名不能使用小驼峰的方法,要使用 `-` !
RE: Nuxt开发指南