defineRouteMiddleware

定义页面导航中间件

defineRouteMiddleware() 用于定义页面导航中间件,提供中间件处理函数的类型提示。

声明

defineRouteMiddleware(middleware: RouteMiddleware): RouteMiddleware

参数

middleware

  • 类型:RouteMiddleware
  • 含义:在页面导航期间执行的处理函数,to 表示即将进入的目标页面,from 表示当前页面。
interface RouteMiddleware {
  (to: RouteLocation, from: RouteLocation): MaybePromise<RouteMiddlewareResult>;
}

RouteLocation

字段说明
path页面路径
fullPath包含查询参数的完整路径
query已解析的查询参数,值为字符串
meta页面元信息

RouteMiddlewareResult

返回值行为
voidtrue放行导航,继续执行后续中间件
false中止当前导航
goTo(...)重定向到其他页面
abortNavigation(...)中止当前导航,可附带错误原因

需要控制导航结果时,可以继续阅读:

API参考:goTo 创建页面重定向结果,将用户带到其他页面。
API参考:abortNavigation 创建导航中止结果,阻止进入目标页面。

示例

中间件放在项目的 src/middlewares 目录下,并通过默认导出提供处理函数:

src/middlewares/auth.ts
export default defineRouteMiddleware((to, from) => {
  console.log("navigate:", from.fullPath, "->", to.fullPath);
});

页面使用时,在 definePageMeta 中声明中间件名称:

<script setup lang="ts">
definePageMeta({
  middleware: "auth",
});
</script>

相关

使用手册:前往了解页面中间件