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

Related