Closed a74559774 closed 6 months ago
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 ?
<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>
The current code can be paginated, but this method is not SEO friendly and the routing address will not change.
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:
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
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?
`
`