Nuxt3：能否在卸载前页面时先挂载下一页？能否自定义路由？

首先明确：完全可行，而且不需要劫持路由，利用Vue的过渡系统结合Nuxt的页面渲染逻辑就能实现。你用onBeforeRouteLeave达不到效果，是因为这个钩子的定位是路由跳转前的逻辑处理（比如离开确认、数据清理），没法控制DOM层面的过渡渲染流程。

核心实现思路 #

默认的Nuxt页面过渡（mode="out-in"）会先销毁旧页面再渲染新页面，所以没法同时显示。我们需要修改过渡模式，让前后页面组件同时存在于DOM中，直到过渡动画完成。

具体实现步骤 #

1. 自定义页面过渡组件
   在app.vue中，用Vue的<Transition>组件包裹<NuxtPage>，去掉默认的mode="out-in"，并给<NuxtPage>绑定唯一key确保路由切换时重新渲染：

<template>
  <div class="page-wrapper">
    <Transition name="dual-transition">
      <NuxtPage :key="$route.fullPath" />
    </Transition>
  </div>
</template>

<style>
.page-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* 给所有页面组件设置绝对定位，确保前后页可以重叠 */
.page-wrapper > .nuxt-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
}

/* 新页面进入动画 */
.dual-transition-enter-from {
  transform: translateX(100%);
}
.dual-transition-enter-active {
  transition: transform 0.5s ease-in-out;
}

/* 旧页面离开动画 */
.dual-transition-leave-active {
  transition: transform 0.5s ease-in-out;
}
.dual-transition-leave-to {
  transform: translateX(-100%);
}
</style>

2. 进阶：用JS控制动画（更灵活）
   如果需要复杂的动画逻辑，可以用过渡钩子手动控制：

<template>
  <div class="page-wrapper">
    <Transition
      :css="false"
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @leave="onLeave"
    >
      <NuxtPage :key="$route.fullPath" />
    </Transition>
  </div>
</template>

<script setup>
const onBeforeEnter = (el) => {
  el.style.position = 'absolute'
  el.style.top = '0'
  el.style.left = '100%'
  el.style.width = '100%'
  el.style.minHeight = '100vh'
}

const onEnter = (el, done) => {
  el.animate([
    { left: '100%' },
    { left: '0' }
  ], {
    duration: 600,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
  }).onfinish = done
}

const onLeave = (el, done) => {
  el.animate([
    { left: '0' },
    { left: '-100%' }
  ], {
    duration: 600,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
  }).onfinish = done
}
</script>

<style>
.page-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
</style>

关于劫持路由的问题 #

完全没必要。Nuxt3基于Vue Router，虽然可以通过app/router.options.ts扩展路由配置，或者用全局路由守卫干预跳转逻辑，但这会增加系统复杂度，还可能和Nuxt的自动路由、布局系统冲突。上面的过渡方案已经能完美实现前后页同时显示的效果，优先用这种方式。

注意事项 #

• 必须给页面容器设置position: relative，页面组件设置position: absolute，否则前后页会占据正常文档流空间，导致布局混乱。
• 绑定:key="$route.fullPath"是关键，确保路由切换时Nuxt会重新渲染页面组件，触发过渡动画。
• 如果你的页面有固定定位的元素（比如导航栏），建议把这类元素放在页面容器外面，避免被过渡动画影响。

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