Nuxt3全局pageTransition钩子失效问题求助

问题原因 #

你在nuxt.config.ts的app.pageTransition中直接配置onEnter/onLeave钩子是无效的——Nuxt3的全局页面过渡配置仅支持name、mode、css等基础参数，钩子函数属于Vue过渡组件的事件逻辑，无法在此处直接定义。

解决方案 #

方案1：指定页面单独配置过渡钩子 #

在需要启用过渡钩子的页面中，通过definePageMeta直接配置pageTransition，钩子会直接生效：

/test页面修改后代码：

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: "page",
    mode: "in-out",
    onEnter(el, done) {
      console.log("进入Test页面");
      done();
    },
    onLeave(el, done) {
      console.log("离开Test页面");
      done();
    },
  },
});
</script>

<template>
  <div>
    <h1>Test Page</h1>
    <NuxtLink to="/test2">test2</NuxtLink>
  </div>
</template>

/test2页面修改后代码：

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: "page",
    mode: "in-out",
    onEnter(el, done) {
      console.log("进入Test2页面");
      done();
    },
    onLeave(el, done) {
      console.log("离开Test2页面");
      done();
    },
  },
});
</script>

<template>
  <div>
    <h1>Test 2 Page</h1>
    <NuxtLink to="/test">test</NuxtLink>
  </div>
</template>

方案2：全局自定义过渡组件，指定页面引用 #

如果多个页面需要相同的过渡钩子，可以封装成全局组件，再在目标页面启用：

1. 创建自定义过渡组件 components/transitions/PageTransition.vue：

<template>
  <Transition name="page" mode="in-out" @enter="onEnter" @leave="onLeave">
    <slot />
  </Transition>
</template>

<script setup lang="ts">
const onEnter = (el: Element, done: () => void) => {
  console.log("页面进入触发");
  done();
};

const onLeave = (el: Element, done: () => void) => {
  console.log("页面离开触发");
  done();
};
</script>

2. 在需要启用的页面中，通过definePageMeta指定使用该组件：

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

注意事项 #

• 必须调用done()函数，否则过渡会卡住无法完成。
• 若不需要全局过渡，可删除nuxt.config.ts中app.pageTransition的配置，避免冲突。

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