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 內使用。