如何在不重新加载组件的情况下更改vue中的查询参数

Question

如何使用 Vue-Router 更改查询参数而不重新加载 Vue 中的组件。但是推送新查询总是重新加载组件，使我的 api 请求重新运行

this.router.replace({query: {name: 'John'} })

Answer 1

这个在 Nuxt 中运行得很好，所以我想它在 Vue（甚至 3）中也完全没问题。

<button @click="$router.replace({ path: $route.path, query: { plan: 'private' } })">test</button>

它将推送您当前所在的相同路径，但会更改其中的查询参数。

取自官方文档：https ://router.vuejs.org/guide/essentials/navigation.html