Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

defineNuxtRouteMiddleware

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

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

类型

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

参数

中间件

  • 类型: 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 文件中定义的自定义错误页面,并公开从中间件传递的错误消息和代码。

重定向

在路由中间件中结合使用 useStatenavigateTo 辅助函数,根据用户的身份验证状态将其重定向到不同的路由

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

navigateToabortNavigation 都是可以在 defineNuxtRouteMiddleware 内部使用的全局可用辅助函数。