How can I change only specific query params in current route vue-router?
Try the following
this.$router.push({path: this.$route.path, query: { ...this.$route.query, foo: 'bar' }})
Your best friend - destructuring assignment
. JavaScript docs.
Here is an example of how to use it in your case:
let query = this.$route.query;
let newPage = 100;
this.$route.query = {...query, page: newPage};
Without any additional variables it will look much cleaner:
this.$route.query = {...this.$route.query, page: 100};
After code execution you will have query
with overwritten page
parameter to 100 and the remaining untouched parameters.
PS. Updated on 19.11.2019
As mentioned in comments, $route
object is read-only.
Change to $router.replace
or $router.push
:
this.$router.replace({name: path_name, query: {...this.$route.query, page: 100}})