How To Use Router.push For Same Path, Different Query Parameter In Vue.js

Current url is /?type=1 I want to use router.push on this page. this.$router.push('/?type=2'); But this gives NavigationDuplicated error. I don't want to use params like /:type

Solution 1:

Aliraza already answered your questions but I am sharing this answer because I see your comments asking, component don't rerender, for rerendering components you need to watch params like this:

 watch: {
    '$route.params': 'functionToRunWhenParamsChange',
  }

Solution 2:

Please see this GitHub issue. They're using this.$router.replace but I imagine it shares the same root cause as when you are using this.$router.push. The proposed solution / workaround is to use an empty catch chained to the $router call, so:

this.$router.push('/?type=2').catch(err => {})

EDIT

You can pass the query params as an object to the second parameter of this.$router.push as well:

this.$router.push({ query: { type: 2 } })

Solution 3:

That's because it's not different from your current path. If the value of type is different it won't give you NavigationDuplicated error. you can separate query like below too to make sure it will be understandable by the framework:

this.$router.push({
   path: '/',
   query: { type: 2 },
});