Vue-router 报错NavigationDuplicated的解决方法

 更新时间:2020年03月31日 15:12:50   作者:lavender  
这篇文章主要介绍了Vue-router 报错NavigationDuplicated的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

版本:3.1.x

报错原因:

使用push()、replace()进行导航时,不能重复导航到当前路由。

解决办法:

方法1:在定义路由的文件中router/index.js

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
 return originalPush.call(this, location).catch(err => err)
}

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.repalce = function replace (location) { 
 return originalReplace.call(this, location).catch(err => err)
}

方法2:在调用push()、replace()方法时,catch

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

说明:第一种方法好像对replace()没有作用。

到此这篇关于Vue-router 报错NavigationDuplicated的解决方法的文章就介绍到这了,更多相关Vue-router 报错NavigationDuplicated内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中@click绑定事件点击不生效的原因及解决方案

    vue中@click绑定事件点击不生效的原因及解决方案

    根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件,这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下
    2022-12-12
  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-03-03
  • Vue前端实现截图功能的简单步骤

    Vue前端实现截图功能的简单步骤

    本文介绍了如何使用html2canvas库来实现HTML页面或某个元素的截图功能,文中通过代码介绍的非常详细,需要注意的是此方法只能在浏览器环境中使用,需要的朋友可以参考下
    2024-10-10
  • Vue项目如何根据图片url获取file对象并用axios上传

    Vue项目如何根据图片url获取file对象并用axios上传

    这篇文章主要介绍了Vue项目如何根据图片url获取file对象并用axios上传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 详解vue中引入stylus及报错解决方法

    详解vue中引入stylus及报错解决方法

    这篇文章主要介绍了详解vue中引入stylus及报错解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue关于重置表单数据出现undefined的解决

    vue关于重置表单数据出现undefined的解决

    这篇文章主要介绍了vue关于重置表单数据出现undefined的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中 $forceUpdate的使用解析

    vue中 $forceUpdate的使用解析

    这篇文章主要介绍了vue中 $forceUpdate的使用解析,该方案是比较好的一种方式,比如说我们尝试直接给某个​​object​​增加一个属性,发现页面上没有效果;直接将length变成0来清空数组,下文详细资料需要的小伙伴可以参考一下
    2022-04-04
  • Vue中混入mixin的用法介绍

    Vue中混入mixin的用法介绍

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-10-10
  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • Vue框架之goods组件开发详解

    Vue框架之goods组件开发详解

    这篇文章主要介绍了Vue框架之goodvs组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论