Nuxt.js页面组件报错：service.children未定义（仅nuxt-link导航时出现）

看起来你遇到的问题是在通过nuxt-link跳转到/services/parents时出现页面渲染失败，但直接在地址栏输入URL访问却完全正常。让我们一步步分析原因并给出解决方案：

问题根源 #

错误提示service.children is not defined来自你的/pages/services/index.vue模板中访问service.children.length的代码。出现这种情况的核心原因是：
当你通过客户端导航（nuxt-link）跳转时，index.vue组件可能仍处于DOM中（比如路由嵌套场景），或者store中的服务数据被更新后，部分条目缺失children字段。而直接访问URL时，服务端渲染会确保数据完整加载后再渲染页面，因此不会触发报错。

解决方案 #

1. 给children字段添加默认值（最稳妥的方法）

无论是从API获取数据时，还是存入store时，确保children始终是数组（哪怕是空数组），从根源避免undefined的出现。

• 在store mutation中处理：
  打开你的content-lists/services store模块，修改add mutation：

mutations: {
  add(state, service) {
    // 强制确保children字段存在，默认空数组
    service.children = service.children || [];
    state.list.push(service);
  }
}

• 或者在GraphQL查询中设置默认值：
  如果你的Strapi支持GraphQL的@default指令，可以直接在查询中指定默认值：

query {
  services(limit: ${perPage}, start: ${offset}) {
    id
    name
    slug
    children @default(value: []) {
      id
      name
    }
  }
}

2. 修改模板，添加安全判断

在index.vue的模板中，使用可选链操作符（ES2020+）或者显式判断来避免报错：

<!-- 推荐：使用可选链（需要环境支持ES2020+） -->
<template v-if="service.children?.length">

<!-- 兼容旧环境的写法 -->
<template v-if="service.children && service.children.length">

3. 检查路由配置，确保页面独立

如果/services和/services/parents是两个独立页面而非嵌套路由，确认Nuxt的自动路由是否正常工作：

• Nuxt默认会把pages/services/index.vue映射为/services，pages/services/parents.vue映射为/services/parents，二者是平级路由。
• 如果你自定义了路由配置，确保没有把/services/parents设置为/services的子路由（否则index.vue会作为父组件一直渲染）。
• 检查是否使用了keep-alive缓存index.vue，导致组件未被销毁。

4. 确保fetch钩子在客户端正确执行

在parents.vue中，确保fetch在客户端导航时先清空旧数据，再加载新数据：

async fetch({ store, query }) {
  // 先清空旧数据，避免残留的旧数据导致渲染问题
  store.commit('content-lists/services/empty');
  
  let page = Number(query.page) || 1;
  let perPage = Number(store.getters['content-lists/services/perPage']);
  let offset = (page - 1) * perPage;
  
  const max = await strapi.request('get', '/services/count');
  store.commit('content-lists/services/setMaxPages', max);
  
  const response = await strapi.request('post', '/graphql', {
    data: {
      query: `query {
        services(limit: ${perPage}, start: ${offset}) {
          id
          name
          slug
          children {
            id
            name
          }
        }
      }`
    }
  });
  
  response.data.services.forEach((service) => {
    // 再次确保children字段存在
    service.children = service.children || [];
    store.commit('content-lists/services/add', { id: service.id || service._id, ...service });
  });
}

这些方法应该能彻底解决你遇到的客户端导航报错问题。

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