Nuxt3 中文课程《实战全栈开发简书》限时优惠

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: '页面未找到' })
  }
})

上述路由中间件将重定向用户到~/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中使用它们。