1

我正在尝试使用两个<a>标签对我的博客页面上的特定帖子进行分页。

根据Prismic Pagination API，实现这一点就像传递参数链接一样简单?page=1，例如example.com/blog/?page=1，但没有任何改变。

如果我不能使用组件实例来更改它，我该如何查询该page选项，它位于 async 函数内部？asyncData()

pages/blog/index.vue：

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <h2>{{ content }}</h2>
    <section class="columns is-multiline is-centered">
      <article
        class="post box column is-3-widescreen is-4-tablet"
        v-for="(post, index) in posts"
        :key="index"
      >
        <nuxt-link :to="`/blog/${post.uid}`">
          <img :src="post.data.image.url" alt />
          <h3 class="title is-6">{{ Dom.RichText.asText(post.data.title) }}</h3>
        </nuxt-link>
      </article>
    </section>

    <!-- I want to PAGINATE my posts from here -->
    <nav class="pagination column">
      <a class="pagination-previous button is-black">&#x3c;</a>
      <a class="pagination-next button is-black">&#x3e;</a>
    </nav>
  </div>
</template>

<script>
import Prismic from 'prismic-javascript'
import PrismicDOM from 'prismic-dom'
import { initApi, generatePageData } from '@/prismic.config'

export default {
  data() {
    return {
      Dom: PrismicDOM,
      title: 'Blog',
      content:
        'Welcome to my blog. Browse through a streamline of tech tutorials that suits you needs.'
    }
  },

  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.content
        }
      ]
    }
  },

  asyncData(context) {
    if (context.payload) {
      return generatePageData('blog_page', context.payload)
    } else {
      return initApi().then(api => {
        return api
          .query(Prismic.Predicates.at('document.type', 'blog_posts'), {
            pageSize: 3,
            page: 1
          })
          .then(response => {
            return generatePageData('blog_page', response.results)
          })
      })
    }
  }
}
</script>
4

1 回答 1

1

为了让它工作，你需要设置一个watchQuery来响应变化。从文档：

观察查询字符串并在更改时执行组件方法（asyncData、fetch、validate、layout，...）

// inside page.vue
export default {
  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
  watchQuery: ['page']
}

现在页面正在被监视，您可以使用 NuxtLink 更新查询字符串参数。 

<nuxt-link :to="`/blog?page=${page_num}`"

虽然在 asyncData 中您无法访问组件，但您可以访问上下文对象

export default {
  asyncData (context) {
    return axios.get(`https://my-api/posts?page=${context.query.page}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}
于 2019-08-05T15:33:57.097 回答