vue.js - Gridsome - 如何添加类别 slug 以发布 URL

Question

我想将类别 slug 添加到我的博客文章的 URL 中。即：my-website.com/caterory-slug/post-slug

我正在设置这样的路径：

module.exports = {
  siteName: 'Gridsome',
  siteDescription: 'A WordPress starter for Gridsome',

  templates: {
    WordPressCategory: '/category/:slug', // adds a route for the "category" post type (Optional)
    WordPressPost: [
      {
        path: (node) => {
          return `/${node.categories[0].slug}/${node.slug}`
        }
      }
    ]
    // WordPressPostTag: '/tag/:slug' // adds a route for the "post_tag" post type (Optional)
  },
  plugins: [
    ...
  ]
}

但是我在类别 slug 的 URL 中未定义。我可以用 ID 替换类别的 slug，它会起作用。类别的 ID 将在 URL 中。我可以在模板中访问类别的 slug，但不能在 URL 中访问。

在同一个模板中，我的图形 ql 查询如下所示：

<page-query>
query Home ($page: Int) {
  allWordPressPost (page: $page, perPage: 10) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
        excerpt
        categories {
          slug
        }
      }
    }
  }
}
</page-query>

查询的响应是：

"edges": [
  {
    "node": {
      "id": "581",
      "title": "Chatbot Lazy Loader Plugin",
      "path": "/categories-0-slug/chatbot-lazy-loader-plugin/",
      "categories": [
        {
          "slug": "wordpress"
        }
      ]
    }
  }...
]

标签： vue.jsgridsome