How to use router.push for same path, different query parameter in Vue.js

Question

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

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
– winklerrr, Commented Oct 12, 2021 at 16:25

Hanzla Habib · Accepted Answer · 2020-12-31 04:04:45Z

10

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

answered Dec 31, 2020 at 4:04

Hanzla Habib

3,75330 silver badges26 bronze badges

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

1 Comment

Jimmy lau Over a year ago

A solution that works for me. But for anyone want to use this method, be aware to add null checker, because when we leave the route, this callback would be called again and the params is undefined this time.

Alireza HI · Accepted Answer · 2019-12-20 16:25:18Z

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

answered Dec 20, 2019 at 16:25

Alireza HI

1,9331 gold badge14 silver badges20 bronze badges

4 Comments

Jeongyong Lee Over a year ago

This doesn't re-render the component.

Jeongyong Lee Over a year ago

OK, anyway I found how to control NavigationDuplicated error. I need to make another question for the component issue. Thank you!

Fabio Magarelli Over a year ago

This doesn't actually work as pointed out by @JeongyongLee the router does not push to the same path although the query has changed

greensin Over a year ago

This does not solve the issue. Rather navigates you to the root of your router and does not stay in the same path but with new params.

Tuvshuu · Accepted Answer · 2022-05-24 14:42:18Z

3

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

answered May 24, 2022 at 14:42

Tuvshuu

311 bronze badge

Comments

Matt U · Accepted Answer · 2019-12-20 16:24:24Z

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

answered Dec 20, 2019 at 16:24

Matt U

5,12812 silver badges28 bronze badges

2 Comments

Jeongyong Lee Over a year ago

This doesn't re-render the component.

Jeongyong Lee Over a year ago

OK, anyway I found how to control NavigationDuplicated error. I need to make another question for the component issue. Thank you!

Ali Maher · Accepted Answer · 2022-08-31 12:22:46Z

-5

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

answered Aug 31, 2022 at 12:22

Ali Maher

32 bronze badges

1 Comment

Kalnode Over a year ago

OP asked about VueJS, not regular JS.

Collectives™ on Stack Overflow

How to use router.push for same path, different query parameter in Vue.js

5 Answers 5

1 Comment

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related