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

回答1:

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

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

来源：https://stackoverflow.com/questions/59428227/how-to-use-router-push-for-same-path-different-query-parameter-in-vue-js