码农叉叉歪

Appearance

Return to top
快速导航

defineNuxtRouteMiddleware - 创建命名路由中间件

defineNuxtRouteMiddleware是一个用于创建命名路由中间件的辅助方法。

TIP

路由中间件是存储在 Nuxt 应用程序的middleware目录中的导航卫士（除非另有设置）。

类型 

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

参数

middleware

  • Type: 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')
  }

  return navigateTo('/dashboard')
})

navigateTo和abortNavigation都是全局可用的辅助f方法，可以在defineNuxtRouteMiddleware中使用