Question

使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。

路由中间件存储在 Nuxt 应用程序的 middleware/ 目录中（除非 另行设置）。

Type

ts

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

参数

middleware

显示错误页面

您可以使用路由中间件来抛出错误并显示有用的错误消息：

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')
  }

  return navigateTo('/dashboard')
})

navigateTo 和 abortNavigation 都是全局可用的辅助函数，您可以在 defineNuxtRouteMiddleware 中使用它们。