Vue路由器。使用查询参数调用 this.$router.push() 会导致双重路由器更新答案

【问题标题】：Vue router. Call this.$router.push() with query params leads to double router updateVue路由器。使用查询参数调用 this.$router.push() 会导致双重路由器更新
【发布时间】：2019-10-15 23:40:03
【问题描述】：

我尝试写分页。问题在于下一个/上一个按钮。单击时，我尝试使用路径名和几个查询调用 this.$router.push() 。问题是 vue-router 立即去正确的链接查询，但在立即去相同的链接但没有查询。

这是分页按钮上的方法

goToPage(forward) {
  this.$router.push({name: 'spots', query: {per_page: 5, page: 2}});
}

这是在 router.js 文件中定义路由的方式

{
  path: '/:eventId/guestlists/:guestlistId/spots',
  component: SpotsAndMeals,
  name: 'spots',
  props: true
},

我想要什么？我想在我的浏览器中执行 goToPage 函数后更新路由并显示查询参数。

【问题讨论】：

控制台有警告吗？
你能显示链接的标记吗？
感谢大家的尝试！但是我发现了问题。问题在于 Vue 如何使用相同的。如果我通过查询从 path.name A 转到 path.name B 一切正常。如果我通过查询从 path.name A 转到 path.name A，魔术就开始了。为了克服这个问题，我需要添加路由器视图：key="$route.fullPath">。所以现在 Vue 的行为符合我的预期

标签： vue.js vue-router

【解决方案1】：

感谢大家的尝试！但是我发现了问题。问题在于 Vue 如何使用相同的 <router-view>。如果我通过查询从 path.name A 转到 path.name B 一切正常。如果我通过查询从 path.name A 转到 path.name A，魔术就开始了。为了克服这个问题，我需要添加<router-view :key="$route.fullPath"></router-view>。所以现在 Vue 的行为符合我的预期

【讨论】：