Vue.js 我正在使用gridsome，是否有更好的方法为每个类别创建页面？

我使用

gridsome源mysql

插件从mysql获取数据

文章有50多个类别，我想为每个类别创建一个页面

现在，我的代码如下所示：

• /src/components/Category01.vue

  文件：

除了不同的类别名称外，所有名称都相同

是否有更好的方法为每个类别创建页面

谢谢大家!

您可以使用动态创建

类别

页面

您只需要在

templates

目录中的1个

CategoryPage.vue

文件，在模板文件中，按类别名称过滤当前类别：

gridesome.server.js

module.exports=函数（api）{
createPages（异步（{graphql，createPage}）=>{
const{data}=wait graphql(`
{
所有职位{
边缘{
节点{
身份证件
类别
标题
}
}
}
}
`);
data.allPosts.edges.forEach（（{node}）=>{
创建页面({
路径：`/path-TO-POSTS/${node.id}`，
组件：“./src/templates/CategoryPage.vue”，
背景：{
categoryName:node.Category//这将用作CategoryPage.vue中的查询变量
}
});
});
}
}

模板/CategoryPage.vue:

查询视频（$categoryName:String！）{
视频：所有帖子（过滤器：{Category:{eq:$categoryName}}）{
边缘{
节点{
类别
}
}
}
}

希望这有帮助

<template>
  ...
  ...
</template>

<static-query>
query {
  allPosts(filter: { Category: { in: ["Category01"] }})  {
    edges {
      node {
        id
        Category
        Title
      }
    }
  }
}
</static-query>

<script>
export default {
    name: "Category01",
};
</script>

<template>
  ...
  ...
</template>

<static-query>
query {
  allPosts(filter: { Category: { in: ["Category02"] }})  {
    edges {
      node {
        id
        Category
        Title
      }
    }
  }
}
</static-query>

<script>
export default {
    name: "Category02",
};
</script>