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

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

• javascript
• vue.js
• router

• 1 So how did you solve it? You made some comments that you were able to solve it, but you don't say how. Please explain. – winklerrr Commented Oct 12, 2021 at 16:25

5 Answers 5

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',
  }

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

<router-view :key="$route.fullPath"

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

If you wanna change your url (I mean push to another web page) and reload that page, you should use this syntax:

window.location.href = "your-url"

GG