解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

1 导致错误原因

路由跳转有两种形式：

• 声明式：<router-link :to="...">
• 编程式：router.push(...)

声明式导航是没有这种问题的，这是因为 vue-router 底层已经处理好了。

而编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，错误信息如下：

这是因为 vue-router 版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。

2 解决方法

1. 使用时对错误进行捕获。

this.$router.push('about').catch(err => { return err })

2. 使用时给 push 传递相应的成功、失败的回调函数。

this.$router.push({ path: 'about' }, () => {}, () => {})

3. 降低 vue-router 版本为 3.0。

npm install vue-router@3.0

4. 重写 push 和 replace 方法，只需要在 router 文件夹下的 index.js 文件里面加入如下代码即可。

import VueRouter from 'vue-router'

// 解决 vue-router 升级导致的 Uncaught(in promise)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

注意：VueRouter.prototype.push中的VueRouter要与import VueRouter from 'vue-router'中的VueRouter名称一致并且要写在Vue.use(VueRouter)之前。