看起来你遇到了一个典型的「路由跳转被覆盖」的问题——点击分页按钮后地址栏先显示正确的查询参数，随即又跳回不带参数的路由，这说明有另一个路由操作在你调用this.$router.push()之后触发了跳转，覆盖了原本的参数。下面我来帮你一步步排查和解决：

第一步：定位重复跳转的触发源 #

首先我们需要确认是不是真的有两次路由跳转，以及第二次跳转来自哪里。你可以在两个地方加日志：

1. 在你的分页方法里添加日志：

goToPage(forward) { 
  console.log('执行分页跳转：', {name: 'spots', query: {per_page: 5, page: 2}});
  this.$router.push({name: 'spots', query: {per_page: 5, page: 2}}); 
}

2. 在router.js里添加全局导航守卫，打印每次路由跳转的前后状态：

router.beforeEach((to, from, next) => {
  console.log(`路由跳转：从 ${JSON.stringify(from.fullPath)} 到 ${JSON.stringify(to.fullPath)}`);
  next();
});

打开浏览器控制台操作按钮，你会看到两次跳转日志：第一次是带?per_page=5&page=2的，第二次是不带参数的。通过日志里的from和to信息，就能大致判断第二次跳转是来自组件内部还是全局守卫。

常见原因及解决方案 #

原因1：组件生命周期/Watch里的重复路由操作 #

最常见的情况是你的SpotsAndMeals组件在created/mounted钩子，或者某个watch监听里，又执行了不带查询参数的路由跳转。比如：

// 错误示例：组件初始化时强制跳转不带参数的路由
mounted() {
  // 这里会覆盖你之前的分页跳转
  this.$router.push({name: 'spots'});
}

解决办法：

• 检查组件的生命周期钩子和所有watch监听，移除不必要的路由跳转
• 如果是为了初始化数据，直接用当前路由的query参数即可，不需要重新跳转：

  mounted() {
    // 直接获取当前路由的查询参数
    const { per_page = 5, page = 1 } = this.$route.query;
    this.fetchData(per_page, page);
  }
  

原因2：全局导航守卫里的逻辑覆盖了参数 #

如果你的全局导航守卫（比如router.beforeEach）里针对spots路由做了重定向，但没有保留原有的查询参数，也会导致这个问题：

// 错误示例：重定向时清空了query参数
router.beforeEach((to, from, next) => {
  if (to.name === 'spots') {
    // 这里没有传递query，会覆盖原跳转的参数
    next({name: 'spots'});
  } else {
    next();
  }
});

解决办法：
重定向时保留原有的query参数：

router.beforeEach((to, from, next) => {
  if (to.name === 'spots') {
    next({name: 'spots', query: to.query}); // 保留原查询参数
  } else {
    next();
  }
});

原因3：模板中不小心混用了<router-link>和方法跳转 #

如果你的分页按钮同时绑定了<router-link>标签和@click="goToPage"，会导致两次路由跳转（一次来自router-link，一次来自方法）。比如：

<!-- 错误示例：同时使用router-link和click方法 -->
<router-link :to="{name: 'spots'}">
  <button @click="goToPage(true)">下一页</button>
</router-link>

解决办法：
移除<router-link>，只用@click触发方法跳转：

<button @click="goToPage(true)">下一页</button>

额外小技巧 #

如果暂时找不到重复跳转的源头，可以尝试用router.replace()代替router.push()，它会替换当前路由记录而不是添加新记录，有时候能临时避开冲突，但最终还是建议找到触发重复跳转的根源哦。

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