Vue router. Call this.$router.push() with query params leads to double router update

Question

I try to write pagination. Problem is with next/prev buttons. On click I try to call this.$router.push() with path name and several queries. The problems is that vue-router immediately goes to correct link with queries, but after immediately goes to same link but without queries.

This is method on pagination button

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

This is how route is defined in router.js file

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

What do I want? I want after executing goToPage function route in my browser is updated and is displayed with query params.

Thank you all for attempt! But I have found the problem. The problem is in how Vue works with same <router-view>. If I go from path.name A to path.name B with queries everything works fine. Magic starts if I go from path.name A to path.name A with queries. In order to overcome this I need to add router-view :key="$route.fullPath"></router-view>. So now Vue behaves as I expect — Arthur Zakharov

Arthur Zakharov Arthur Zakharov · Accepted Answer · 2019-06-03T13:47:29

Thank you all for attempt! But I have found the problem. The problem is in how Vue works with same <router-view>. If I go from path.name A to path.name B with queries everything works fine. Magic starts if I go from path.name A to path.name A with queries. In order to overcome this I need to add <router-view :key="$route.fullPath"></router-view>. So now Vue behaves as I expect

Vue router. Call this.$router.push() with query params leads to double router update

1 Answers