Nuxt3如何避免页面代码重复？统一配置definePageMeta

方法一：抽离可复用配置到Composable #

definePageMeta是编译时函数，无法直接在Composable中调用，但可以把配置对象抽离出来，在页面中导入复用：

1. 在composables/usePageTransitionMeta.ts中定义复用配置：

export const usePageTransitionMeta = () => ({
  pageTransition: {
    name: "anime",
    mode: "out-in",
    onEnter() {
      console.log("enter");
    }
  }
});

2. 在目标页面中导入并使用：

<script setup lang="ts">
definePageMeta(usePageTransitionMeta());
</script>

这种方式仅需在每个页面写一行代码，避免重复编写完整配置。

方法二：通过自定义模块批量修改页面元数据 #

如果不想修改任何页面代码，可以通过Nuxt模块的pages:extend钩子，批量给指定页面注入元数据配置：

1. 创建modules/pageMeta.ts模块文件：

import { defineNuxtModule } from "@nuxt/kit";

export default defineNuxtModule({
  setup(_, nuxt) {
    // 指定需要应用配置的页面路径
    const targetPaths = ["/product", "/prefs", "/order", "/user", "/about"];

    nuxt.hook("pages:extend", (pages) => {
      pages.forEach(page => {
        if (targetPaths.includes(page.path)) {
          // 合并页面原有配置（如果页面已自定义definePageMeta）
          page.meta = {
            ...page.meta,
            pageTransition: {
              name: "anime",
              mode: "out-in",
              onEnter() {
                console.log("enter");
              }
            }
          };
        }
      });
    });
  }
});

2. 在nuxt.config.ts中注册该模块：

export default defineNuxtConfig({
  modules: ["./modules/pageMeta.ts"]
});

这种方式无需修改页面代码，直接在模块中批量配置指定页面的元数据，过渡钩子会正常生效。

方法三：使用页面模板继承配置 #

Nuxt3支持页面模板，通过创建_template.vue让目标页面继承元数据配置：

1. 创建pages/_template.vue模板文件：

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: "anime",
    mode: "out-in",
    onEnter() {
      console.log("enter");
    }
  }
});
</script>

<template>
  <slot />
</template>

2. 目标页面（如product.vue、order.vue等）直接编写内容即可，无需重复写definePageMeta：

<template>
  <div>
    <h1>Title</h1>
    <NuxtLink to="/order">order</NuxtLink>
  </div>
</template>

注意：页面模板默认会应用到所有页面，若需精准匹配指定页面，可在模板中通过useRoute判断路径，或结合路由分组实现。

内容的提问来源于stack exchange，提问作者none