Question

我尝试写分页。问题是下一个/上一个按钮。在单击时，我尝试使用路径名和几个查询来调用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函数后更新路由，并显示查询参数。

Answer 1

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

Vue路由器。使用查询参数调用this。$ router.push（）导致双路由器更新

1 个答案: