如何在Nuxt中实现页面导航、评论分页及单条评论展示功能

分页方案选型 #

• 两种方案都可落地，适配不同场景：
  • 全量拉取后用slice()分页：仅适合评论总条数少于1000的小数据量场景，优势是切换页码无请求延迟，劣势是首次加载耗时长，数据量超过2000条后会明显卡顿。
  • 接口分块拉取分页：通用首选方案，你所用的评论接口原生支持分页参数，请求时携带_page（当前页码）和_limit（每页条数）即可直接获取对应页的数据，同时可从响应头x-total-count字段拿到总条数计算总页数，优势是首次加载速度快、支持任意量级数据，是生产环境的标准实现。

代码实现示例 #

接口分页实现（Nuxt3 推荐） #

const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页展示条数
const totalCount = ref(0) // 评论总条数

// 拉取对应页评论数据
const { data: comments } = await useFetch(
  'https://jsonplaceholder.typicode.com/comments',
  {
    params: {
      _page: currentPage.value,
      _limit: pageSize.value
    },
    onResponse({ response }) {
      // 从响应头获取总条数
      totalCount.value = Number(response.headers.get('x-total-count'))
    }
  }
)

// 计算总页数
const totalPage = computed(() => Math.ceil(totalCount.value / pageSize.value))

前端slice分页实现（仅小数据量场景使用） #

// 一次性拉取全量评论
const { data: allComments } = await useFetch('https://jsonplaceholder.typicode.com/comments')
const currentPage = ref(1)
const pageSize = ref(10)

// 切割得到当前页展示的评论
const currentPageComments = computed(() => {
  const startOffset = (currentPage.value - 1) * pageSize.value
  const endOffset = startOffset + pageSize.value
  return allComments.value?.slice(startOffset, endOffset) || []
})
// 计算总页数
const totalPage = computed(() => Math.ceil((allComments.value?.length || 0) / pageSize.value))

单条评论查看实现 #

推荐用Nuxt动态路由实现，步骤如下：

1. 在项目pages目录下新建comments/[id].vue文件，作为单条评论的详情页
2. 详情页内获取路由参数，拉取对应评论数据：

// pages/comments/[id].vue 核心代码
const route = useRoute()
const { data: commentDetail } = await useFetch(
  `https://jsonplaceholder.typicode.com/comments/${route.params.id}`
)

3. 评论列表页的每条评论项绑定跳转逻辑，点击后跳转到/comments/${comment.id}即可。

如果不需要独立详情页，也可以用弹窗组件实现，点击评论时传入对应评论id，从已拉取的评论列表中匹配对应数据渲染即可，无需额外发请求。

内容的提问来源于stack exchange，提问作者Sergey