How to use Pagination component to implement routing jump paging?

[a74559774]

Description

Hello, I use the Pagination component to implement pagination. The code is as follows. This is not a routing jump method for pagination. I am worried that this will affect SEO. How can I optimize it to be SEO-friendly?

`

`

[noook]

Hi, could you please format the code following this guide ? https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting

Also, I'm not sure that I understand your question, nor how it is related to Nuxt UI given the context you provide.

Could you provide more context, or explain your concerns more in detail ?

[a74559774]

<script setup lang="ts"> 
import type { BlogPost } from '~/types' 
const page = ref(1) 
const pageSize = ref(6) 
const { data: posts, pending } = await useAsyncData('posts', () => ($fetch as any)('/api/blog/blog', { 
  method: 'POST', 
  body: { 'page': page.value, 'pageSize': pageSize.value }
 }), {
   watch: [page]
 }) 
</script>
<template>
  <UContainer>
    <UPageBody>
      <UBlogList>
        <UBlogPost
          v-for="(post, index) in pending ? [] : posts.data.records"
          :key="index"
          :to="'/blog/'+post.blogId"
          :title="post.title"
          :description="post.description"
          :image="post.image"
          :date="new Date(post.date).toLocaleDateString('zh-CN')"
          :ui="{
            description: 'line-clamp-2'
          }"
        />
      </UBlogList>
    </UPageBody>
    <div class="flex justify-center px-3 py-5">
      <UPagination v-model="page" :page-count="pageSize" :total="pending || !posts.data ? 0 : posts.data.totalCount" show-last show-first />
    </div>

  </UContainer>
</template>

[a74559774]

The current code can be paginated, but this method is not SEO friendly and the routing address will not change.

[noook]

The code you provided is not formatted correctly. ruby after the backticks will apply color syntaxing for a ruby file. For a vue file, you'll naturally use vue instead.

Also, this issue is not related to Nuxt UI, but applies to Nuxt itself. For that kind of question I invite you to join the community's Discord and look for help in there, the community should be more active and give you an answer right away: https://discord.com/invite/nuxt

I can give a first draft of an answer though.

If you need to support pagination with the routing, you can make use of a writable computed:

const route = useRoute()

const page = computed({
  get() {
    return Number(route.query.page?.toString()) || 1
  },
  set(newPage: number) {
    navigateTo({
      query: {
        page: newPage,
      }
    })
  },
})

What it does:

• It reads directly for the url to parse the page number, and pass it to your pagination component, and your fetch method
• Updates the url when you click on a new page, which updates the page property that was based on the URL query parameters.

If you don't want it to add a new entry to your history on each page change, you can eventually use the replace option in navigateTo