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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3 TS vite element ali-oss使用教程示例

    vue3 TS vite element ali-oss使用教程示例

    这篇文章主要为大家介绍了vue3 TS vite element ali-oss使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue进行下载与处理二进制流文件的方法详解

    vue进行下载与处理二进制流文件的方法详解

    这篇文章主要为大家详细介绍了vue如何实现将后端返回的二进制流进行处理并实现下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • 使用vue-cli4.0快速搭建一个项目的方法步骤

    使用vue-cli4.0快速搭建一个项目的方法步骤

    这篇文章主要介绍了使用vue-cli4.0快速搭建一个项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 基于vue实现图片验证码倒计时60s功能

    基于vue实现图片验证码倒计时60s功能

    这篇文章主要介绍了基于vue实现图片验证码倒计时60s功能,本文通过截图实例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • VUE2.0中Jsonp的使用方法

    VUE2.0中Jsonp的使用方法

    使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下
    2018-05-05
  • element el-tooltip实现自定义修改样式

    element el-tooltip实现自定义修改样式

    本文主要介绍了element el-tooltip实现自定义修改样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue实现多条件筛选超简洁代码

    vue实现多条件筛选超简洁代码

    这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下
    2023-09-09
  • vue中@change兼容问题详解

    vue中@change兼容问题详解

    这篇文章主要介绍了vue中@change兼容问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • van-picker组件default-index属性设置不生效踩坑及解决

    van-picker组件default-index属性设置不生效踩坑及解决

    这篇文章主要介绍了van-picker组件default-index属性设置不生效踩坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 关于vue.js中实现方法内某些代码延时执行

    关于vue.js中实现方法内某些代码延时执行

    今天小编就为大家分享一篇关于vue.js中实现方法内某些代码延时执行,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论