[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca

created at 12-11-2021 views: 35

Scene

Using programmatic routing navigation, in the current routing state, an error will be reported when performing a second jump (clicking the same button all the time)

[Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca

Solution

1. Use onComplete(), onAbort()

this.$router.push({ path: ‘/XXX’ },onComplete => {},onAbort => {})

push and replace provide onComplete and onAbort callbacks as the second and third parameters. These callbacks will be called when the navigation is completed (after all hook functions are parsed) or terminated (navigated to the same route, or the route before the current route is completed jumps to a different route).

Specific introduction on the official website If the problem has not been solved, you need to encapsulate router.js

2. Package router.js
Add the following code in router.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
} 

If the modification of push still does not take effect, you can try the replace method, for example:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const originalPush = Router.prototype.replace
Router.prototype.push = function replace(location) {
  return originalPush.call(this, location).catch(err => err)
}
created at:12-11-2021
edited at: 12-11-2021: