使用 Nuxt JS / Vue JS 从对象生成“X”页？答案

【问题标题】：Generate 'X' number of pages from object using Nuxt JS / Vue JS?使用 Nuxt JS / Vue JS 从对象生成“X”页？
【发布时间】：2020-06-23 04:13:27
【问题描述】：

我目前正在使用 NuxtJS 版本“^2.0.0”（我相信它是 2.13.x）创建一个 "Static Generated" 站点。

我创建了一个 Vuex“存储”，我计划从中提取数据以帮助我的静态生成过程。例如，我计划在商店中创建一个数组 Articles，其中包含网站上每篇文章的对象。

我的主要问题是：是否可以每页呈现“X”数量的这些文章（比如说 5 个），然后让 NuxtJS 自动生成一个新页面以包含下一个 5，直到源数组 (@987654325 @) 对象用完了？

我知道 NuxtJS 提供了路由生成，但它是否也可以静态生成对应每个新路由的新页面？我认为我的要求与Dynamic Routes 不同，但如果我弄错了，请纠正我。

同样，config generate 选项似乎并不完全符合我所描述的内容，尽管我承认我并不完全理解它的文档。

【问题讨论】：

您必须使用动态路由，否则您将如何区分包含 5 篇文章的页面和包含下 5 篇文章的页面？它们是两个不同的页面，对吧？有不同的网址？
我刚刚意识到我可以使用动态 URL 解决这个问题，只需添加逻辑以从 Articles 数组中提取前 5 个对象，然后增加全局计数器并创建新路由。明天我会试一试，然后报告。
@s4k1b 您的评论在我上传后立即出现。我相信你是对的，我只是误解了动态路由，因为我目前正在为这些页面使用嵌套路由，但现在看到我根本不需要嵌套路由，只能依靠动态路由来满足我的需求。

标签： javascript vue.js vuex nuxt.js

【解决方案1】：

感谢@s4k1b 的建议。一些继续阅读和他们的指导帮助我意识到我需要使用动态路由。

一开始我没有意识到这一点，因为我对这些页面使用了嵌套路由（不必要地），而动态路由不能很好地发挥作用。将嵌套路由替换为动态路由允许我引用 URL 参数（即 /writing/1，数字“1”），然后我在 v-for 逻辑中使用这些参数来实现所需的效果。

最终结果如下所示：

<post
        v-for="index in postCount" :key="index"
        :showBadge="false"
        :title="projects[index + indexAdjust].title"
        :subtitle="projects[index + indexAdjust].subtitle"
        :date="projects[index + indexAdjust].date"
        :tag="projects[index + indexAdjust].tag"
        :url="projects[index + indexAdjust].url">
        {{ projects[index + indexAdjust].body }}
        </post>

...

data () {
    return {
      projects: this.$store.state.main.projects,
      blogsPerPage: this.$store.state.main.blogsPerPage,
      router: this.$route.params
    }
  },
  computed: {
    postCount () {
      let value = this.blogsPerPage
      if (parseInt(this.router.page) === Math.ceil(this.projects.length / this.blogsPerPage)) {
        // if on the last page
        value = this.projects.length % this.blogsPerPage
      }
      return value
    },
    indexAdjust () {
      let value = (this.blogsPerPage * (parseInt(this.router.page) - 1)) - 1
      return value
    }
  },

基本上：在每个页面上迭代post 组件blogsPerPage 次数，除非我们在最后一页然后只循环帖子总数的模数以postsPerPage 的数量只显示剩余的发布内容。

indexAdjust 计算值仅计算来自我们的 Vuex 的帖子数量 store 应该已经在之前的页面上呈现过。为此，我们将前一页的编号 (parseInt(this.router.page) - 1 乘以每页的帖子数。由于v-for 在通过静态数字而不是通过 Javascript 对象进行迭代时从 1 开始，因此我们减 1 以从存储数组中的 0 位置开始。 p>

【讨论】：