H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue router / element 项目重复点击路由报错

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

image-20200717105913661.png

虽然不影响使用,但问题还是要解决的。
于是,查文档,注意到 vue-router 文档中有这样一段话,传送门→

image-20200717111335204.png

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

image-20200717110138589.png

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以下了。

本文地址:H5W3 » 【前端技术】Vue router / element 项目重复点击路由报错

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址