Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

  • 发现问题:当小编重复点击同一个路由导航,路由导航的参数没有变化,从而造成该报错
  • 报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location——翻译意思大致是:重复导航(in promise),避免对当前位置的冗余导航

  

  • 通过上面翻译其实不是特别明确报错知道为什么会报这种错,并且我们点击相同的路由导航是不可避免的,怎么解决呢?
  • 之后小编去查了vue-router,以及历史更新内容,发现其实在更新文档中,随着版本的更新,在3.1.0之后引入了push()的promise的语法, 如果没有通过参数指定回调函数,该方法直接返回一个promise来指定成功/失败的回调, 并且内部会判断如果要跳转的路径和参数都没有变化, 如果没有变化则会抛出一个失败的promise

Releases · vuejs/vue-router · GitHub

 

  • 知道原委:编程式路由导航到当前路径且参数没有变化时会抛出 NavigationDuplicated 错误
  •  解决报错:那么现在报错就由原来的我们点击同一个路由导致的报错,到如何解决一个promise抛出的错误了,是不是突然熟悉了许多,瞬间有了思路!!!promise抛出错误,小编是直接.catch捕获错误即可也可以直接指定成功回调/失败的回调

 

this.$router.push({ path: path }).catch(() => {}) // .catch捕获错误
this.$router.push({ path: '/home' }, () => {}) // 指定为成功回调
this.$router.push({ path: '/home' }, undefined,() => {}) // 指定失败回调

猜你喜欢

转载自blog.csdn.net/qq_45796592/article/details/137634892