Question

我有一个如下的.vue文件

<template>
  <v-pagination
    v-if="totalPage > 1"
    v-model="currentPage"
    :total-visible="10"
    class="mt-6"
    :length="totalPage"
    color="#FF9A00"
  ></v-pagination>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: this.$route.params.id ? parseInt(this.$route.params.id) : 1,
        count: 100,
        pageLimit: 10
      }
    },
    computed: {
      totalPage() {
        return Math.ceil(this.count / this.pageLimit)
      },
    },
    watch: {
      currentPage(val) {
        this.$router.push({ name: 'article-page-id', params: { id: val } })
      }
    },
  }
</script>

但是路由的分页取决于watch()。我希望我可以改用实际的链接，这样我就可以让nuxt generate中的搜寻器在这些分页的页面上也生成静态HTML

更新：我在https://github.com/vuetifyjs/vuetify/issues/4855中看到了一些解决方法，但是我不确定在哪里放置这些解决方法。它们是components，plugins吗？我不确定

Answer 1

怎么样而不是推路由器，而是创建一个链接并使用js单击它，如下所示：

    watch: {
      currentPage(val) {
                let link = document.createElement('a');
                link.href = /*you'r domain + */ this.$route.path + "/article-page-id/" + this.$route.params.id;
                link.click()      
    }

祝你好运！

Answer 2

您可以像这样使用@input事件：

<template>
  <v-pagination
    v-if="totalPage > 1"
    v-model="currentPage"
    :total-visible="10"
    class="mt-6"
    :length="totalPage"
    color="#FF9A00"
    @input="handlePagination($event)"
  ></v-pagination>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: this.$route.params.id ? parseInt(this.$route.params.id) : 1,
        count: 100,
        pageLimit: 10
      }
    },
    computed: {
      totalPage() {
        return Math.ceil(this.count / this.pageLimit)
      },
    },
    methods: {
      handlePagination(e) {
        // APPLY YOUR OWN ROUTER PUSH LOGIC HERE
        // THE EVENT SHOULD CONTAIN THE CURRENT PAGE
        this.$router.push({ name: 'article-page-id', params: { id: val } })
      }
    },
  }
</script>

Nuxt Vuetify在v分页上应用nuxt-link

2 个答案: