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

Posted 2023-02-23

【中文标题】Vue路由器。使用查询参数调用 this.$router.push() 会导致双重路由器更​​新

【英文标题】：Vue router. Call this.$router.push() with query params leads to double router update

【发布时间】：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 的行为符合我的预期

【参考方案1】：

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