你可以使用 definePage 宏为页面添加路由元信息（meta），例如页面标题、所需的认证权限等。

两种声明方式

对象

<script setup>
definePage({
  meta: {
    requiresAuth: true, // 自定义元信息
    title: "用户主页",
  },
});
// 或者使用从外部导入的变量（插件支持）
import { appName } from "@/constants";
definePage({
  meta: {
    title: `首页 - ${appName}`,
  },
});
</script>

回调函数 hook

<script setup>
// 如果需要根据路由状态动态定义元信息，可使用回调函数
definePage({
  meta: (router) => ({
    title: `项目: ${router.currentRoute.value.query.code || "默认标题"}`,
  }),
});
</script>

类型声明

为了让 TypeScript 识别这些自定义的 meta 字段，你需要进行类型扩展。创建一个类型声明文件（如 src/types/typed-router.d.ts）：

src/types/typed-router.d.ts

import "vue-router/auto-routes";

declare module "vue-router/auto-routes" {
  interface RouteMeta {
    /**
     * 页面标题
     */
    title?: string;
    /**
     * 是否需要认证
     */
    requiresAuth?: boolean;
    // ... 其他你需要的字段
  }
}

更新日志

2025/9/27 17:16

查看所有更新日志

• 1eb9b-docs(Javascript): 更新Generator生成器函数文档内容于 2025/9/27