vue-router 重复点击导航路由报错解决

865 阅读1分钟

问题:

vue-router版本升级到3.1.x 后,如果重复点击导航路由时,控制台出现以上报错信息。虽然不会影响代码的正常运行,但也要看看问题出在哪儿,怎么解决

原因:

vue-router版本≥v3.1后,回调形式改成promise api了,返回的是promise对象,如果没有catch来捕获错误,就会报上图的错误。

解决方式:

1.降低vue-router版本至3.1以下

npm i vue-router@3.0 -S

2.在router文件夹下的index.js中,增加以下代码

import 'VueRouter' from 'vue-router'
// 页面路由重复点击报错解决(写在VueRouter引用前)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {  
    return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)