Vue分页功能跳转至后续页面后点击文章获取索引错误问题

架构老林

2026-10-20

问题根因

你分页后渲染用的allArticles是filteredArticles按当前页切割出来的子数组，循环时拿到的index是当前页内的相对索引，不是全局filteredArticles数组的真实索引：

第一页的第1条相对索引0，和全局索引一致，所以跳转正常
第二页的第1条相对索引还是0，但对应全局索引应该是10，你直接把0传入showArticle读取filteredArticles[0]，自然永远拿到第一篇文章

解决方案

方案1（更稳妥，推荐）：直接传文章URL，跳过索引匹配

彻底规避索引计算错误的问题，无论分页、筛选逻辑怎么改都不会出错：

修改模板里的点击事件传参：

<a @click="showArticle(article.url)">
<!-- 下方read more按钮同理修改 -->
<a class="read-more" @click="showArticle(article.url)">Read More</a>

简化showArticle逻辑：

showArticle: function showArticle(articleUrl) {
  window.location = articleUrl;
}

方案2（兼容现有索引逻辑）：计算全局索引传入

如果需要保留索引参数的用法，就把相对索引转换成全局索引再传：

<a @click="showArticle((page - 1) * perPage + index)">
<!-- 下方read more按钮同理修改 -->
<a class="read-more" @click="showArticle((page - 1) * perPage + index)">Read More</a>

现有代码优化建议

列表key不要用索引，改成文章的唯一标识（比如url字段），避免列表筛选、排序时出现渲染异常：
```
<li v-for="(article, index) in allArticles" :key="article.url">
```

setPages方法执行前先清空旧的页数数组，避免筛选后页数变化时出现重复页码：

setPages() {
  this.pages = [] // 先清空旧数据
  let numberOfPages = Math.ceil(this.filteredArticles.length / this.perPage);
  for (let index = 1; index <= numberOfPages; index++) {
    this.pages.push(index);
  }
}