Nuxt3应用导航至带不同参数的同一路由时崩溃求助

• 改用useAsyncData处理数据请求
  直接在<script setup>顶层使用await可能导致路由切换时组件实例销毁与数据请求不同步，引发DOM相关错误。替换为Nuxt提供的useAsyncData，它会自动处理请求取消、状态管理和缓存，确保路由切换时的稳定性：

  <template>
      <div>{{ project?.title }}</div>
  </template>
  
  <script setup>
  const { params } = useRoute();
  const server = useRuntimeConfig().public.projectServer;
  
  // 用参数name作为缓存key，确保不同项目触发新请求
  const { data: project } = useAsyncData(`project-${params.name}`, () => {
    return $fetch(`${server}/api/project/${params.name}`);
  });
  </script>
  

• 检查未清理的DOM操作
  如果页面中存在手动操作DOM的代码（如自定义事件监听、第三方库初始化），需在组件卸载时清理资源。例如：

  import { onUnmounted } from 'vue';
  
  // 假设存在手动绑定的DOM事件
  const domElement = ref(null);
  onMounted(() => {
    domElement.value?.addEventListener('click', handleClick);
  });
  onUnmounted(() => {
    domElement.value?.removeEventListener('click', handleClick);
  });
  

• 添加加载状态与可选链保护
  在数据未加载完成时，避免渲染依赖数据的DOM节点，或使用可选链?.防止空值访问：

  <template>
      <div v-if="project">{{ project.title }}</div>
      <div v-else>加载中...</div>
  </template>
  

• 暂时禁用组件缓存
  若使用了<NuxtPage keep-alive>，尝试移除keep-alive属性，查看是否因组件缓存导致旧实例未销毁。如果是缓存问题，可通过include/exclude规则指定需要缓存的组件，避免动态路由页面被错误缓存。

• 升级Nuxt版本
  部分旧版Nuxt存在动态路由导航的DOM更新bug，升级到最新稳定版可能解决问题。

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