defineNuxtRouteMiddleware
使用 defineNuxtRouteMiddleware 輔助函式建立具名的路由中介層。
路由中介層儲存在 Nuxt 應用程式的 middleware/ 中（除非另行設定）。
類型
defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware
interface RouteMiddleware {
(to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
}
參數
middleware
- 類型:
RouteMiddleware
一個函式，它接收兩個 Vue Router 的路由位置物件作為參數：下一個路由 to 作為第一個，目前的路由 from 作為第二個。
在Vue Router 文件中深入了解 RouteLocationNormalized 的可用屬性。
範例
顯示錯誤頁面
您可以使用路由中介層來拋出錯誤並顯示有用的錯誤訊息
middleware/error.ts
export default defineNuxtRouteMiddleware((to) => {
if (to.params.id === '1') {
throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
})
上面的路由中介層會將使用者重新導向到 ~/error.vue 檔案中定義的自訂錯誤頁面，並公開從中介層傳遞的錯誤訊息和代碼。
重新導向
在路由中介層中使用 useState 與 navigateTo 輔助函式組合，根據使用者的驗證狀態將使用者重新導向到不同的路由
middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.isAuthenticated) {
return navigateTo('/login')
}
if (to.path !== '/dashboard') {
return navigateTo('/dashboard')
}
})
navigateTo 和 abortNavigation 都是全域可用的輔助函式，您可以在 defineNuxtRouteMiddleware 中使用它們。