defineNuxtRouteMiddleware

原始檔
使用 defineNuxtRouteMiddleware 輔助函式建立命名路由中介軟體。

路由中介軟體儲存在 Nuxt 應用程式的 app/middleware/ 目錄中（除非另有設定）。

型別

簽名
export function defineNuxtRouteMiddleware (middleware: RouteMiddleware): RouteMiddleware

interface RouteMiddleware {
  (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
}

引數

middleware

  • 型別：RouteMiddleware

一個函式，它接受兩個 Vue Router 的路由位置物件作為引數：第一個是下一個路由 to，第二個是當前路由 from。

在 Vue Router 文件 中瞭解更多關於 RouteLocationNormalized 的可用屬性。

示例

顯示錯誤頁面

您可以使用路由中介軟體來丟擲錯誤並顯示有用的錯誤訊息

app/middleware/error.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
  }
})

上述路由中介軟體將把使用者重定向到 ~/error.vue 檔案中定義的自定義錯誤頁面，並暴露從中介軟體傳遞的錯誤訊息和程式碼。

重定向

在路由中介軟體內部，結合使用 useState 和 navigateTo 輔助函式，根據使用者的認證狀態將他們重定向到不同的路由

app/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 內部使用它們。