Update query params in vue(vue-router) without reloading page

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
          );

Your question looks pretty much like this one: stackoverflow.com/a/66372937/8816585 — kissu
– kissu, Commented Sep 20, 2022 at 12:51

kissu · Accepted Answer · 2022-09-20 12:55:17Z

-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

answered Sep 20, 2022 at 12:55

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krillko Over a year ago

This doesn't work, router.replace causes reload/remounting of components

kissu Over a year ago

@Krillko OP mentions only page reload, which this is NOT doing (only updating the Vue router), it is meanwhile indeed impact components' lifecycle. My answer is then correct and you are probably looking for another question overall.

Collectives™ on Stack Overflow

Update query params in vue(vue-router) without reloading page

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related