解决vue在控制台的 NavigationDuplicated 报错_JavaScript_红尘码农·Joseph-CSDN博客

解决vue在控制台的 NavigationDuplicated 报错

复现

vue router 升级到3.1.x 后，重复点击导航时（连续点击相同路由链接）控制台出现报错 {_name: "NavigationDuplicated", name: "NavigationDuplicated"}，虽然不影响功能使用，但也不能视而不见。

原因

vue router ≥ v3.1 后 ，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台始终会出现如图的警告。

解决方法一

// 在引用vue-router的页面添加一段代码 const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {  return originalPush.call(this, location).catch(err => err)}

解决方法二（推荐）

// 补齐 router.push() 的第三个参数 this.$router.push(route, () => {}, (e) => {    console.log('输出报错',e) })

解决方法三（推荐）

// 捕获 router.push 异常 this.$router.push(route).catch(err => {    console.log('输出报错',err)})
    • *

后记，

解决办法有很多种，大家可自由选择。解决办法一看似一劳永逸，但是不利于业务理解。也有人提出降级解决，本人更推荐 【解决办法二 或 解决办法三】。

Original url: Access
Created at: 2020-02-21 02:30:28
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论