解决Vue报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

I encountered a problem when I wrote the code today, and the error is shown in the figure

The reason for the problem is: repeated clicks on the same route

---

---

A valid workaround is as follows:

(Pro-test is effective) Method 1: In the router folder, add the following code:

Vue.use(Router)
const router = new Router({
  routes
})
 
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

Method 2: When jumping, judge whether the jumping route is consistent with the current route, so as to avoid problems caused by repeated jumping.

toMenu (item) {
  if (this.$route.path !== item.url) {
    this.$router.push({ path: item.url })
  }
}

                                       Method 3: Use the catch method to catch the router.push exception.

this.$router.push(route).catch(err => {
  console.log('输出报错',err)
})