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? stackoverflow.com/questions/40382388/… — chrismarx
– chrismarx, Commented Jan 24, 2019 at 15:38
Thanks, Yes I do this solution and It's working, but I'm looking for a solution using <nuxt-link> or <router-link> — Anass Ez-zouaine
– Anass Ez-zouaine, Commented Jan 27, 2019 at 11:31

AndrewShmig · Accepted Answer · 2019-11-19 04:28:17Z

47

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, 2019 at 4:28

answered Jan 27, 2019 at 19:13

AndrewShmig

4,9198 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

db2 Over a year ago

The route object is read-only according to the docs, so how does this not throw a type error?

jhadenfeldt Over a year ago

TypeError: Cannot assign to read only property 'params' of object '#<Object>' It is definitely throwing a type error.

justin Over a year ago

$router.replace worked for me. I was was able to remove all query params with $router.replace({ query: {} })

Vlad Macovei Over a year ago

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.

Alberto Acuña Over a year ago

there is any other option without error in console por navigaton duplicated?

Hossein Bajan · Accepted Answer · 2021-01-02 21:31:23Z

5

Try the following

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

edited Jan 2, 2021 at 21:31

answered Jan 2, 2021 at 18:14

Hossein Bajan

2,8325 gold badges24 silver badges38 bronze badges

Comments

Sachin S · Accepted Answer · 2021-08-17 18:25:39Z

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, 2021 at 18:25

Sachin S

3061 silver badge9 bronze badges

Comments

FlyingZipper · Accepted Answer · 2021-09-13 03:04:57Z

0

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)

answered Sep 13, 2021 at 3:04

FlyingZipper

7216 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Related