How can I change only specific query params in current route vue-router?

Question

I try to make pagination in Nuxt Js project, so how can I change only page query params in my current route, and keep other query params with there values I have 3 query params :

      this.count = this.$route.query.count ?? 8
      this.page = this.$route.query.page ?? 1
      this.sort_by = this.$route.query.sort_by ?? 'latest'

  <li class="pagination-link" v-for="(page, key) in computed.lastPage" :key="key"
        :class="{ 'active': page === computed.currentPage }">
      <nuxt-link :to="'?page='+page" append
                 :class="{'current-link' : computed.currentPage === page}">
        {{ page }}
      </nuxt-link>
    </li>

Are you looking for this? https://stackoverflow.com/questions/40382388/how-to-set-url-query-params-in-vue-with-vue-router — chrismarx, Jan 24 '19 at 15:38
Thanks, Yes I do this solution and It's working, but I'm looking for a solution using `` or `` — Anass Ez-zouaine, Jan 27 '19 at 11:31

AndrewShmig · Accepted Answer · 2019-11-19T04:28:17.650

45

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

edited Nov 19 '19 at 04:28

answered Jan 27 '19 at 19:13

AndrewShmig

4,843
6
39
68

7

The route object is read-only according to the docs, so how does this not throw a type error? – db2 Nov 04 '19 at 14:31
4

`TypeError: Cannot assign to read only property 'params' of object '# – jhadenfeldt Nov 19 '19 at 00:40
1

`$router.replace` worked for me. I was was able to remove all query params with `$router.replace({ query: {} })` – justin Jul 13 '20 at 20:14
2

for me, using Nuxt, ```this.$router.replace``` results in ```NavigationDuplicated: Avoided redundant navigation to current location``` error. But ```this.$router.push({ query: { ...this.$route.query, foo: 'bar' } })``` works without errors. – Vlad Macovei Jun 23 '21 at 19:56
there is any other option without error in console por navigaton duplicated? – Alberto Acuña Dec 28 '22 at 10:02

Hossein Bajan · Answer 2 · 2021-01-02T21:31:23.210

4

Try the following

this.$router.push({path: this.$route.path, query: { ...this.$route.query, foo: 'bar' }})

edited Jan 02 '21 at 21:31

answered Jan 02 '21 at 18:14

Hossein Bajan

2,644
5
19
36

score 0 · Answer 3 · answered Aug 17 '21 at 18:25

0

Yeap, this is a tricky situation w the Vue router. I've posted the answer here https://stackoverflow.com/a/68822330/8904981 for a similar question

answered Aug 17 '21 at 18:25

Sachin S

186
8

score 0 · Answer 4 · answered Sep 13 '21 at 03:04

In Nuxt.js (will be similar in vue) :

this.$router.replace(`${this.$route.path}?page=${this.page}`)

this.$router.replace will replace the current path with the given string without pushing the change to the history link

this.route.path will query the current path without any queryString (use this.$route.fullPath for the route with query strings)

How can I change only specific query params in current route vue-router?

4 Answers4

Linked