在 vue(vue-router) 中更新查詢參數而不重新加載頁面

Question

我有一個頁面，其中有一個包含Pagination和tabs的表格。 Url 看起來像這樣。

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

所以我想在每次用戶分頁和更改選項卡時更新 URL 狀態（查詢參數）而不重新加載頁面只向 API 發出請求。

更改選項卡也是如此。 在不重新加載頁面的情況下更新查詢參數。

我曾嘗試使用history.pushState但這會與 vue-router 歷史記錄混淆，並且單擊后退和前進將不再將您帶到正確的頁面。

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

Answer 1

這應該足以解決您的問題

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

此處提供更多信息： https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location