解决vue报错问题:重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided

本文主要是介绍解决vue报错问题:重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

重复点击导航栏按钮报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/recruit”.
这两天做项目的时候突然发现在多次点击导航栏按钮时会出现这样的报错,不影响使用,但是身为一名程序员是不允许出现这种情况的。。。
如图:
在这里插入图片描述
在网上百度的方案也挺多的
方案一: 在重新下载依赖包时,安装的vue-router还是之前出错的那个版本 删除node_modules 从新安装npm i vue-router@3.0 -S
方案二:在跳转时,判断是否跳转路由和当前路由是否一致,避免重复跳转产生问题
if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … { this.router.push({ path: item.url })
}

方案三:使用 catch 方法捕获 router.push 异常

this.$router.push(route).catch(err => {console.log('报错',err)}

方案四:在 router 文件夹下里面的文件index.js里面找到如下位置

 Vue.use(Router)const router = new Router({routes})找到上面位置,在下面增加这段代码即可。const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) {return VueRouterPush.call(this, to).catch(err => err)}

参考链接:https://blog.csdn.net/qq_36437172/article/details/108269846
方案五:找到Vue.use(Router)进行配置下

		import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}

这篇关于解决vue报错问题:重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/239831

相关文章

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、