Nuxt Vuetify中为v-pagination配置nuxt-link实现静态可抓取分页

Great question! Let's walk through how to adjust your Vuetify pagination to use nuxt-link instead of a watcher, so Nuxt Generate can crawl and statically generate all your paginated pages. We'll also clarify whether to implement this in a component or a plugin.

Step 1: Modify Your Pagination Component to Use Nuxt-Link #

The key is to override Vuetify's default pagination button template with nuxt-link, which tells Nuxt's crawler about valid routes. Here's how to update your .vue file:

<template>
  <v-pagination
    v-if="totalPage > 1"
    :value="currentPage"
    :total-visible="10"
    class="mt-6"
    :length="totalPage"
    color="#FF9A00"
  >
    <!-- Custom template for pagination items using nuxt-link -->
    <template v-slot:item="{ page, active }">
      <nuxt-link
        :to="{ name: 'article-page-id', params: { id: page } }"
        :class="{ 'v-pagination__item--active': active }"
        class="v-pagination__item"
      >
        {{ page }}
      </nuxt-link>
    </template>
  </v-pagination>
</template>

<script>
export default {
  data() {
    return {
      count: 100,
      pageLimit: 10
    }
  },
  computed: {
    currentPage() {
      // Pull current page directly from route params, default to 1
      return this.$route.params.id ? parseInt(this.$route.params.id) : 1
    },
    totalPage() {
      return Math.ceil(this.count / this.pageLimit)
    }
  },
  // Remove the watcher—routing is now handled by nuxt-link
}
</script>

<style scoped>
/* Match Vuetify's default active state styling */
.v-pagination__item--active {
  background-color: #FF9A00 !important;
  color: white !important;
}
</style>

Key Changes: #

• Replaced v-model with :value since we're controlling the current page via the route, not two-way binding
• Added a custom item slot to render each pagination button as a nuxt-link
• Moved currentPage from data to a computed property that pulls directly from the route (no initial setup needed)
• Removed the watch handler—routing is now handled natively by nuxt-link

Step 2: Component vs. Plugin Implementation #

Option 1: Keep It in the Component (Best for Single Use) #

If this pagination is only used on one page (like your article list), keeping the code directly in the component is the simplest approach. It's self-contained and easy to maintain for that specific page.

Option 2: Create a Reusable Global Component/Plugin (Best for Multiple Uses) #

If you need this pagination across multiple pages in your app, turn it into a reusable global component or plugin:

1. Global Component Approach:

   • In your components/ folder, create VuetifyNuxtPagination.vue with the code above, then add flexible props like routeName, count, and pageLimit
   • Register it globally in nuxt.config.js:

     export default {
       components: {
         VuetifyNuxtPagination: '~/components/VuetifyNuxtPagination.vue'
       }
     }
     

   • Use it anywhere with:

     <VuetifyNuxtPagination
       :count="articleCount"
       :page-limit="10"
       route-name="article-page-id"
     />
     

2. Plugin Approach (For Deep Vuetify Integration):

   • If you want to extend Vuetify's native v-pagination instead of creating a new component, make a plugin:
     • In plugins/vuetify-pagination.js:

       import Vue from 'vue'
       
       Vue.component('v-nuxt-pagination', {
         extends: Vue.component('vPagination'),
         props: {
           routeName: { type: String, required: true },
           count: { type: Number, required: true },
           pageLimit: { type: Number, default: 10 }
         },
         render(h) {
           return h('v-pagination', {
             props: {
               value: this.currentPage,
               length: this.totalPage,
               totalVisible: 10,
               color: '#FF9A00'
             },
             scopedSlots: {
               item: ({ page, active }) => h('nuxt-link', {
                 props: { to: { name: this.routeName, params: { id: page } } },
                 class: {
                   'v-pagination__item': true,
                   'v-pagination__item--active': active
                 }
               }, page)
             }
           })
         },
         computed: {
           currentPage() {
             return this.$route.params.id ? parseInt(this.$route.params.id) : 1
           },
           totalPage() {
             return Math.ceil(this.count / this.pageLimit)
           }
         }
       })
       

     • Register the plugin in nuxt.config.js:

       export default {
         plugins: ['~/plugins/vuetify-pagination.js']
       }
       

     • Use it in your pages:

       <v-nuxt-pagination
         :count="100"
         route-name="article-page-id"
       />
       

Final Notes #

• With nuxt-link, Nuxt Generate will now detect all paginated routes and generate static HTML files for each one
• If your count value comes from an API, make sure to set up generate.routes in nuxt.config.js to fetch the total count first and generate all necessary page routes

内容的提问来源于stack exchange，提问作者Dean Christian Armada