Vue-router-element-项目重复点击路由报错

在做 vue + element-ui 我的项目时,反复点击导航路由报错,报错信息如下:

尽管不影响应用,但问题还是要解决的。
于是,查文档,留神到 vue-router 文档中有这样一段话,传送门→

即:vue-router@3.1.0 当前,回调函数返回的是 promise。所以如果没有捕捉到谬误,就没有回调函数,这时错误信息就会交给全局的路由错误处理,因而控制台始终会呈现如上图的谬误。源码如下:

SO … ….

第一种解决办法:升高vue-router的版本在@3.1.0以下

npm i vue\-router@3.0 \--S

第二种办法:在router.push的时候捕捉异样

this.$router.push(path)
    .catch(err=> err)

这个办法尽管会多写几句代码,但相比第一种办法不会受到固定版本的限度。

第三种办法:禁止全局的路由错误处理,在 router/index.js 增加如下代码:

// router/index.js 文件
​
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
    return originalPush.call(this, location).catch(err => err)
} 
​
// 如果路由是router.place的,办法同理

综上还是举荐应用第三种办法的,如果这个办法还是不能解决问题,只能办法二或固定版本在3.1.0以下了。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理