Nuxt3中<NuxtLink>跳转后页面不显示，仅刷新后才加载内容如何解决

问题排查步骤 #

• 确认文件路由配置正确
  Nuxt3基于文件系统自动生成路由，你需要确保pages目录下存在如下两种结构任意一种：
  1. 直接在pages目录下新建foundations.vue文件
  2. 在pages目录下新建foundations文件夹，文件夹内新建index.vue文件
     注意文件名大小写需要和跳转路径完全匹配，避免部署到Linux环境时出现大小写适配问题。
• 检查根布局app.vue是否添加<NuxtPage />组件
  <NuxtPage />是Nuxt3用来渲染匹配路由对应页面内容的内置组件，若根布局缺失该组件，路由跳转后没有对应的渲染容器，就会出现URL更新但页面内容不变的情况，手动刷新时服务端直接返回目标页面全量内容所以能正常显示。
  正确的app.vue基础结构示例：

  <template>
    <div>
      <!-- 全局布局内容，比如导航栏 -->
      <NuxtPage /> <!-- 必须存在，用来渲染路由页面 -->
    </div>
  </template>
  

• 检查是否存在路由守卫/中间件异常
  查看全局路由中间件、页面级中间件是否有未正确处理的中断逻辑，比如错误调用abortNavigation()却没有给出后续跳转逻辑，阻塞了路由渲染流程。
• 排查浏览器控制台报错
  跳转后打开浏览器开发者工具的控制台面板，查看是否有JS运行时错误，错误会阻塞前端路由的后续渲染逻辑，导致页面内容无法更新。
• 检查<NuxtPage>的keep-alive配置是否正确
  若你给<NuxtPage>添加了keep-alive属性，检查include、exclude的配置是否错误匹配了目标页面，导致页面组件没有正常触发更新。

现有参考代码（无逻辑错误） #

路由跳转代码 #

<template>
  <div class="top-nav-tab">
    <NuxtLink to="/foundations"><h3>Foundations</h3></NuxtLink>
  </div>
</template>

foundations目标页面代码 #

<template>
  <h2>Foundation page</h2>
</template>

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