Nuxt.js GraphQL查询空返回时首页重定向失效问题咨询

AI 小北

2026-10-23

核心问题排查

初始数据类型定义不匹配
在data中将profiles初始值设为空对象{}，但后续逻辑按数组读取其length属性，对象本身没有length属性，值为undefined，判断条件永远不成立。
空值兜底缺失导致逻辑中断
Strapi查询无匹配结果时，默认返回的profiles值大概率是null而非空数组，直接调用data.profiles.length会抛出读取null属性的运行时错误，导致后续的console.log和跳转逻辑直接中断，根本不会执行——这也是你看不到预期日志输出的核心原因。
服务端环境适配缺失
开启prefetch: true后，查询会在服务端渲染阶段执行，服务端环境下没有浏览器端的$router实例，直接调用this.$router.push自然不生效。
客户端判断时序错误
写在mounted钩子中的判断逻辑，执行时机早于Apollo查询返回的时间，此时profiles还是初始值，根本拿不到实际查询结果做判断。

修复实现

修正初始数据类型，和接口返回结构匹配

data () {
  return {
    profiles: [] // 替换原有的空对象{}
  }
}

替换Apollo模块的result回调逻辑，加空值兜底+分环境跳转

result ({ data }) {
  // 兼容null/空数组的返回情况，避免读length报错
  const profileList = data?.profiles ?? []
  if (profileList.length === 0) {
    console.log('检测到空查询结果，触发跳转')
    // 分环境处理重定向
    if (process.server) {
      // 服务端阶段：直接通过Nuxt上下文返回302重定向，不渲染空页面
      this.$nuxt.context.ssrContext.redirect({ path: '/', statusCode: 302 })
    } else {
      // 客户端阶段：用replace替换当前路由，避免空页面留在历史记录中
      this.$router.replace('/')
    }
  }
}