vue2: vue-router@3.6.3 报错 Uncaught (in promise) NavigationDuplicated

一、原因

路由跳转有两种形式：

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

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

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

 

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

2 解决方法（四种方法）

方法一：使用时对错误进行捕获。

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

方法二： 使用时给 push 传递相应的成功、失败的回调函数。

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

方法三：降低 vue-router 版本为 3.0。

npm install vue-router@3.0

方法四：

重写 push 和 replace 方法，只需要在 router 文件夹下的 index.js 文件里面：

vue.use(VueRouter)后面加入如下代码即可。

Vue.use(VueRouter)
let originalPush = VueRouter.prototype.push;
let originalReplace = VueRouter.prototype.replace;

VueRouter.prototype.push = function push(location, resolve, reject) { //重写push解决升级route之后，重复点跳转路由error
    if (resolve && reject) {
        originalPush.call(this, location, resolve, reject);
    } else {
        // originalPush.call(this, location).catch(err => err)
        originalPush.call(this, location, () => {
        }, () => {
        });
    }
}
VueRouter.prototype.replace = function replace(location, resolve, reject) { //重写push解决升级route之后，重复点跳转路由error
    if (resolve && reject) {
        originalReplace.call(this, location, resolve, reject);
    } else {
        // originalPush.call(this, location).catch(err => err)
        originalReplace.call(this, location, () => {
        }, () => {
        });
    }
}

项目的话，多个地方要用到编程式路由的话，建议选择方法4,可以一劳永逸。减少代码量