Gridsome技术问题：如何为文章URL添加分类别名并解决未定义异常

我之前也碰到过一模一样的问题！核心原因是Gridsome在生成路由的时候，默认不会自动预加载关联的分类数据——虽然你的页面GraphQL查询能拿到分类slug，但路由的path函数在执行时，这些关联字段还没被拉取回来，所以才会返回undefined。

下面是具体的解决步骤：

1. 在模板配置中添加预加载查询 #

修改你的gridsome.config.js里的WordPressPost模板配置，新增一个query选项，明确请求分类的slug字段。这样Gridsome在构建路由时就会提前加载这些数据：

module.exports = {
  siteName: 'Gridsome',
  siteDescription: 'A WordPress starter for Gridsome',
  templates: {
    WordPressCategory: '/category/:slug',
    WordPressPost: [
      {
        path: (node) => {
          // 现在可以正常访问分类slug了
          return `/${node.categories[0].slug}/${node.slug}`
        },
        // 关键：添加这段预加载查询
        query: `
          query ($id: ID!) {
            wordPressPost(id: $id) {
              categories {
                slug
              }
              slug
            }
          }
        `
      }
    ]
    // WordPressPostTag: '/tag/:slug'
  },
  plugins: [ ... ]
}

2. 可选：添加容错处理（避免无分类时报错） #

如果你的文章可能没有分类，可以给path函数加个 fallback，防止构建时出错：

path: (node) => {
  const categorySlug = node.categories?.[0]?.slug || 'uncategorized';
  return `/${categorySlug}/${node.slug}`
}

为什么这样有效？ #

Gridsome的路由生成逻辑和页面的GraphQL查询是分开的：页面查询是在渲染时执行，而路由是在构建阶段就生成好的。默认情况下，路由函数只能拿到节点的基础字段（比如slug、id），关联数据（像categories）必须通过显式的预加载查询才能在路由函数中访问到。

你的页面查询已经正确获取了分类slug，所以页面渲染时能看到数据，但路由生成时没预加载，才会出现undefined的情况。

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