路由中间件存储在 Nuxt 应用程序的 middleware/ 目录中(除非 另行设置)。
Type
ts
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
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
ts
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.isAuthenticated)
return navigateTo('/login')
return navigateTo('/dashboard')
})
navigateTo 和 abortNavigation 都是全局可用的辅助函数，您可以在 defineNuxtRouteMiddleware 中使用它们。