Nuxt3中API请求时点击Logo跳转首页后自动回退问题

核心原因 #

当你快速点击Logo返回首页时，hotel-search页面的onMounted钩子中仍有异步代码在后台执行（比如路由跳转、API请求后的URL更新操作），这些操作在页面卸载后继续完成，从而触发不必要的路由重定向，将页面拉回hotel-search。

具体修复步骤 #

1. 页面卸载时终止所有异步操作 #

在hotel-search.vue中添加onUnmounted钩子，终止API请求的AbortController并重置相关状态，防止后续代码执行：

import { onUnmounted, useRoute } from 'vue';
// 将abortController提升到组件作用域，避免onMounted内重复创建
const abortController = new AbortController();
const route = useRoute();

onUnmounted(() => {
  // 终止未完成的API请求
  abortController.abort();
  // 重置响应式状态，避免残留数据干扰其他页面
  initialRequestHappened.value = false;
  sid.value = '';
  dck.value = '';
  // 清理EventBus监听
  EventBus.off('showLoading');
});

2. 避免不必要的路由重复跳转 #

修改onMounted中的router.push逻辑，先判断当前路由是否已经是/hotel-search，避免重复触发跳转：

onMounted(async () => {
  EventBus.off('*')
  // 移除sleep(1)，固定延迟会打乱异步时序
  EventBus.emit("showLoading", {});
  
  if(search.value.dck || search.value.sid) {
    if(search.value.sid) delete search.value['sid']
    if(search.value.dck) delete search.value['dck']
    query.value = await api.makeQueryString(search.value);
    search.value = api.decodeQueryString(query.value);
    
    // 仅当前路由不是hotel-search时执行跳转
    if (route.path !== '/hotel-search') {
      await router.push(`/hotel-search?${query.value}`);
    }
  } 
  await getDataForward();
});

3. 防止API请求完成后触发已卸载页面的路由操作 #

在addSidAndDckToURL函数中，先检查当前路由是否仍为/hotel-search，再执行路由更新：

const addSidAndDckToURL = async () => {
  // 页面已跳转则终止后续操作
  if (route.path !== '/hotel-search') return;
  
  // 原有URL更新逻辑
  const updatedQuery = { ...route.query, sid: sid.value, dck: dck.value };
  await router.push({ path: '/hotel-search', query: updatedQuery });
};

4. 替换固定延迟为DOM更新等待 #

如果需要等待DOM渲染完成，用nextTick替代sleep(1)，避免时序错误：

import { nextTick } from 'vue';

onMounted(async () => {
  EventBus.off('*')
  await nextTick(); // 等待DOM更新完成
  EventBus.emit("showLoading", {});
  
  // 后续逻辑...
});

额外排查点 #

• 检查首页是否监听了EventBus事件或全局状态变化，导致自动触发搜索重定向。
• 确认localStorage中是否存储了搜索相关状态，若首页加载时会读取这些状态并跳转，需在返回首页时清除对应存储。

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