defineRouteMiddleware
定义页面导航中间件
defineRouteMiddleware() 用于定义页面导航中间件,提供中间件处理函数的类型提示。
声明
defineRouteMiddleware(middleware: RouteMiddleware): RouteMiddleware
参数
middleware
- 类型:
RouteMiddleware - 含义:在页面导航期间执行的处理函数,
to表示即将进入的目标页面,from表示当前页面。
interface RouteMiddleware {
(to: RouteLocation, from: RouteLocation): MaybePromise<RouteMiddlewareResult>;
}
RouteLocation
| 字段 | 说明 |
|---|---|
path | 页面路径 |
fullPath | 包含查询参数的完整路径 |
query | 已解析的查询参数,值为字符串 |
meta | 页面元信息 |
RouteMiddlewareResult
| 返回值 | 行为 |
|---|---|
void 或 true | 放行导航,继续执行后续中间件 |
false | 中止当前导航 |
goTo(...) | 重定向到其他页面 |
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>