在 vue(vue-router) 中更新查询参数而不重新加载页面

Question

I have a page that has a table that has Pagination and tabs . Url Looks something like this.

http://localhost:4000/listPage?tab=all&page=1&items=10

So I want to update the URL state(query params) every time user paginates and changes tabs without reloading the page only making requests to API's.

Same for changing the tab. Update the query params without reloading the page.

I have tried using the history.pushState but this will mess with vue-router history and clicking back and forward will no longer take you to the correct page.

history.pushState(
            {},
            null,
            this.$route.path + '?'
            + 'view=' + this.currentView + '&'
            + 'page=' + this.currentPage + '&'
            + 'items=' + this.items
          );

Answer 1

This should be enough to solve your case

<button 
  @click="$router.replace({ 
    path: $route.path,
    query: { tab: 'all', page: 1, items: 10 } 
  })"
>
  paginate without moving
</button>

More info available here: https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location