Vue-router: pushing query params

[VdustR]

What problem does this feature solve?

As we can push router with query like router.push({query: {a: 1, b: 2}})

but it's not convenient while I just want to add a condition.

I do this as the followed code to get query string ?a=1&b=2&c=3:

import _ from 'lodash'
let query = _.cloneDeep(router.currentRoute.query)
query.c = 3
router.push(query)

What does the proposed API look like?

router.pushQueryParams({c: 3})

[LinusBorg]

I'm not sure why you would need to deep-clone the query?

this.$router.push({ query: { ...this.$route.query, c: 3 }})

Frankly, since one of our goals is to keep API surface small, I don't think the small convenience of a few less characters to type warrants a new API.

[posva]

I agree with @LinusBorg
On top of that, always replacing the query also allows to remove other query parameters

[VdustR]

Yes. Maybe I'm using this in a wrong way.

Thank you anyway.

[HunorMarton]

This can also be solved with adding something like this to your root component. For removing query parameters you can simply set a parameter to undefined

export default {
  name: 'App',
  watch: {
    '$route'(to, from) {
      if (from.name == to.name) {
        this.$router.replace({
          query: {
            ...from.query,
            ...to.query
          }
        })
      }
    }
  }
}

[NadiaRom]

In Vue Router 3.2.0 intensive use of $router.replace fires Error: Avoided redundant navigation to current location

[cimocimocimo]

I'm currently using vue-router to store search filters in the query string of the url. This is so that a user can bookmark the page to reload their search filters or just share the page. I know I can get rid of the Error: Avoided redundant navigation to current location error by catching it and just ignoring it, but I feel that's bad practice and I'd like the code to fail on any other errors as well.

Is there a workaround or another approach that would allow me to update the query string using vue-router that would prevent navigation and thus prevent the error?

[Rpeanut]

This can also be solved with adding something like this to your root component. For removing query parameters you can simply set a parameter to undefined

export default {
  name: 'App',
  watch: {
    '$route'(to, from) {
      if (from.name == to.name) {
        this.$router.replace({
          query: {
            ...from.query,
            ...to.query
          }
        })
      }
    }
  }
}

it did't work

[Tmodurr]

I'm currently using vue-router to store search filters in the query string of the url. This is so that a user can bookmark the page to reload their search filters or just share the page. I know I can get rid of the Error: Avoided redundant navigation to current location error by catching it and just ignoring it, but I feel that's bad practice and I'd like the code to fail on any other errors as well.

Is there a workaround or another approach that would allow me to update the query string using vue-router that would prevent navigation and thus prevent the error?

Did you find a resolution to this?