Nuxt3页面导航时布局重复渲染问题的解决方案咨询

你现在的问题核心是每个页面都单独用<NuxtLayout>包裹内容，导致页面切换时，布局组件会跟着页面一起销毁、重建，所以每次导航都会触发布局里的渲染逻辑和onMounted钩子。

下面是两种可行的解决方法，按需选择：

方法一：全局统一挂载布局（推荐） #

把布局放到app.vue中作为页面的外层容器，这样布局只会挂载一次，页面切换时仅更新插槽内的内容。

修改app.vue代码：

<script setup>
</script>

<template>
  <NuxtLayout name="test">
    <NuxtPage />
  </NuxtLayout>
</template>

然后移除page1和page2里的<NuxtLayout>标签，简化页面代码：
page1.vue：

<script setup>
</script>

<template>
  <div>
    <h4>page 1</h4>
    <NuxtLink to="/page2">page 2</NuxtLink>
  </div>
</template>

page2.vue：

<script setup>
</script>

<template>
  <div>
    <h4>page 2</h4>
    <NuxtLink to="/page1">page 1</NuxtLink>
  </div>
</template>

方法二：页面通过配置指定布局（适合多布局场景） #

如果需要不同页面使用不同布局，不要在template中嵌套<NuxtLayout>，而是用Nuxt提供的definePageMeta来声明布局：

修改page1和page2的代码，添加布局配置：
page1.vue：

<script setup>
definePageMeta({
  layout: 'test'
})
</script>

<template>
  <div>
    <h4>page 1</h4>
    <NuxtLink to="/page2">page 2</NuxtLink>
  </div>
</template>

page2.vue：

<script setup>
definePageMeta({
  layout: 'test'
})
</script>

<template>
  <div>
    <h4>page 2</h4>
    <NuxtLink to="/page1">page 1</NuxtLink>
  </div>
</template>

同时确保app.vue中包含基础的布局包裹（Nuxt会自动匹配页面指定的布局）：

<script setup>
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

效果验证 #

修改完成后重启项目，在page1和page2之间导航时：

• onMounted中的mount日志只会打印一次
• 布局里的re-render日志不会随每次导航重复触发

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