Is there a way to avoid Error: Avoided redundant navigation to current location. I need to do a pagination, this is the method:
handlePageChange(page: number): void {
const query = {
...this.$route.query,
page: page.toString(),
};
this.$router.push({ name: 'PageName', query });
}
and I keep getting error in the console:
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/page-path?page=2".
I tried doing a catch with the router but that does not work. Can someone help me shed some light what am i doing wrong here? :/
If it's safe to ignore, and you are using vue-router ^3.4.0
, you can do:
import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter
...
this.$router.push(fullPath).catch(error => {
if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
throw Error(error)
}
})
Or handle it globally:
import Vue from 'vue'
import VueRouter from 'vue-router'
const { push } = VueRouter.prototype
const { isNavigationFailure, NavigationFailureType } = VueRouter
VueRouter.prototype.push = function (location) {
return push.call(this, location).catch(error => {
if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
throw Error(error)
}
})
}
Vue.use(VueRouter)
For more details, please refer to Navigation Failures.
This is a bit dated, but merging both existing answers for a cleaner, global handling:
import VueRouter from "vue-router";
Vue.use(VueRouter);
const { isNavigationFailure, NavigationFailureType } = VueRouter;
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
original_push.call(this, location).catch(error => {
if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
throw Error(error)
}
})
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With