如何在重定向前等待目标页面数据加载完成后再执行跳转

这个需求完全可以实现，根据你的技术栈和业务场景可以选择以下三种常用方案：

方案1：预请求核心业务数据（最轻量、最常用） #

• 实现逻辑：点击搜索按钮后，先在当前主页发起搜索页需要的所有接口请求，所有请求返回成功后，把数据存储到sessionStorage等会话存储中，再执行跳转。搜索页加载后优先读取存储中的预加载数据直接渲染，不需要重复发请求，等效于数据提前加载完成。
• 示例代码：

// 主页点击搜索后的逻辑
const searchKeyword = document.querySelector('#search-input').value
const searchPageUrl = `/search-page?keyword=${encodeURIComponent(searchKeyword)}`

// 并行请求搜索页需要的所有业务接口
Promise.all([
  // 搜索结果列表接口
  fetch(`/api/search/result?keyword=${encodeURIComponent(searchKeyword)}`).then(res => res.json()),
  // 搜索筛选项接口
  fetch(`/api/search/filters?keyword=${encodeURIComponent(searchKeyword)}`).then(res => res.json())
]).then(([resultData, filterData]) => {
  // 存储预加载的数据
  sessionStorage.setItem('searchPreloadData', JSON.stringify({
    keyword: searchKeyword,
    result: resultData,
    filters: filterData
  }))
  // 数据全部加载完成后再跳转
  window.location.href = searchPageUrl
})

• 搜索页配套逻辑：页面初始化时先判断sessionStorage中是否有匹配当前搜索关键词的预加载数据，存在则直接读取渲染，不存在再正常发起接口请求，同时用完后及时清除存储的预加载数据避免复用旧数据。

方案2：全页资源预加载（和你预期的when_ready逻辑最匹配） #

• 实现逻辑：同域场景下可以直接预拉取搜索页的所有静态资源，包括HTML、CSS、JS、图片等，所有资源加载完成后再执行跳转，跳转时浏览器会直接读取本地缓存的资源，无需重新请求，做到秒开。
• 注意：如果搜索页和主页跨域，该方案受浏览器同源策略限制无法使用。

方案3：SPA单页应用路由方案 #

如果你的站点是Vue、React等技术栈开发的单页应用，可以直接用前端路由实现无感知切换：

• 点击搜索后先在当前页触发所有搜索接口请求，同时展示全局加载状态提示用户，所有数据加载完成后直接切换前端路由到搜索页组件，把预加载的数据直接传给组件渲染即可，全程没有页面跳转的白屏等待。

体验优化提示 #

点击搜索后建议立刻在当前页展示加载动画/状态提示，避免用户误以为点击无响应重复触发搜索操作。

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