搜索框点击两次报冗余导航的错误（尚品汇Vue项目）

已于 2023-04-20 23:51:03 修改
阅读量91 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2023-04-20 23:49:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47652832/article/details/130278140
版权

搜索框点击两次报冗余导航的错误（尚品汇Vue项目）

错误描述：

如果直接在首页第一次点击搜索按钮，跳转之后是能获取显示对应筛算的内容的，而且点击query传参的内容是可以进行第二次筛选，但是再次点击搜索按钮就会报以下的错误

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/search?categoryName=%E6%89%8B%E6%9C%BA&category3Id=61”.

在这里插入图片描述

这个错误是由于使用了push导航且相同路径点击多次，说明我们点击搜索时并没有修改路径，这时候看到顶部的路径确实缺少params参数

在这里插入图片描述

这时候就要去router文件夹中定义的search路由的path参数是否缺少/:keyword在这里插入图片描述

加上之后发现路径有了params参数且多次搜索不同内容不会再报错误在这里插入图片描述

weixin_47652832
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用vue3实现了尚品汇电商网站项目，源代码可跑通
09-18
通过这个 Vue3 实现的尚品汇电商网站项目，开发者可以深入理解 Vue3 的新特性，并将其应用到实际项目中，提高开发效率和代码质量。同时，这也是一个很好的学习资源，帮助开发者从 Vue2 过渡到 Vue3。
整理 Vue2 项目中各种报错&警告-信息
Mr.小灰狼_随笔
09-06 1万+
Vue 报错&警告-信息 _ 整理版 自己平常 Vue 项目 中出现的一些Bug 和 警告⚠️ , 日常记录一下 : 目录 ( 1 )[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404" ( 2 )[Vue warn]: Error in v-on handler: "TypeError: this.todos.push is not a function
关于编程式路由产生冗余导航,vue-router报错问题解决
weixin_50194471的博客
08-15 525
/ 解决同一页面产生导航冗余，vue-router报错问题。将该段代码直接放置在mian.js文件中即可。
解决冗余导航 vueRouter报错问题
qq_59502044的博客
07-12 156
将以下代码放在路由配置文件index.js中即可。在进行路由跳转时，点击多次出现以下错误。
vue中的路由导航冗余问题
qq_51715571的博客
12-27 376
vue、路径冗余
关于解决NavigationDuplicated: Avoided redundant navigation to current location: “/“.路由跳转冗余问题
qq_50617892的博客
10-17 2259
这段代码的作用是将原始的`push`方法保存到`originalPush`变量中，然后在新的`push`方法中调用原始的`push`方法，并捕获并忽略`NavigationDuplicated`错误。为了避免这个错误的出现，使用上述代码对`VueRouter.prototype.push`进行替换。我们只需在router/index中加入这几行代码，就能完美解决触发同一路由，跳转冗余的问题；这样，当尝试导航到当前已经处于活动状态的路由时，不会抛出错误，而是会直接忽略该导航操作。
vue大型电商项目尚品汇（前台篇）day02.doc
07-09
Vue 大型电商项目尚品汇（前台篇）day02 本文是对 Vue 大型电商项目尚品汇（前台篇）day02 的总结，主要涵盖了 Vue 项目中的技术要点。 一、重写 push/replace 方法 在 Vue 项目中，我们需要重写 push/replace ...
尚硅谷Vue硅谷外卖项目视频.zip
06-04
在这个"尚硅谷Vue硅谷外卖项目"中，我们可以学习到如何使用Vue CLI搭建项目环境，配置Webpack等构建工具，以及如何组织项目的目录结构，如src目录下的components、views、router、store等模块。 【组件化开发】 在...
vue大型电商项目尚品汇（后台篇）day03.doc
07-13
"vue大型电商项目尚品汇（后台篇）day03.doc" 本文档主要讲述了 Vue 大型电商项目尚品汇（后台篇）day03 的开发过程，涵盖了平台属性管理、动态展示数据、添加与修改属性、收集平台属性、返回按钮数据回显问题、...
vue大型电商项目尚品汇（后台篇）day01.doc
07-09
Vue 大型电商项目尚品汇（后台篇）day01.doc 本文档主要关注 Vue.js 框架在大型电商项目尚品汇（后台篇）day01 中的应用，涵盖了组件通信高级、自定义事件、v-model、属性修饰符 sync、$attrs 和 $listeners、$...
vue报错 Avoided redundant navigation to current location: “/search“
weixin_49107940的博客
07-19 528
vue报错Avoidedredundantnavigationtocurrentlocation"/search"
错误 “Avoided redundant navigation to current location...” 的解决方案
FunSober的博客
10-31 1万+
使用编程式导航路由跳转时，需要指定成功和失败的回调函数。
解决vue项目中搜索框多次点击产生的报错——重写push和replace
m0_51144154的博客
12-21 843
解决vue项目中搜索框多次点击产生的报错——重写push和replace vue-router.esm.js?ac56:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/search?k=ASD”. 如上报错解决办法： 在路由index.js中重写push或者replace如下： //为解决多次点击搜索按钮产生的报错需要重写push或replace方法 //
vue中出现路由导航出现 Avoided redundant navigation to current location:“/“问题的解决方法。
热门推荐
m0_65262198的博客
03-26 1万+
当我们在使用编程式路由实现跳转的时候，多次执行会抛出NavigationDuplicated的警告错误是因为"vue-router"3版本之后 底层引入了promise。而我们通过声明式导航没有出现此类问题是因为vue-router底层已经处理好了。 出现问题如下： 解决方法1. 在我们使用编程式导航时，通过给push或replace方法传递相应的成功和失败的回调函数可以捕获到当前的错误解决此问题 如： //编程式导航 this.$router.push({ name:'s
Avoided redundant navigation to current location:
xiawenyi1234的博客
07-09 3930
虽然此报错并不会影响项目运行，但是作为一个强迫症的码农的确受不了error，解决方法如下： 方法1：在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可； 方法2：若不想更换版本解决方法: 在router.js中加入以下代码就可以 记住插入的位置 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return or
[BUG REPORT]Avoided redundant navigation to current location的解决方式
kikikiuu的博客
07-11 7748
在写项目的时候，遇到 Avoided redundant navigation to current location的问题 在网上查的时候，发现大家都说是在菜单栏重复点击的原因， 我的工作场景是，点击菜单栏后，在这个单页面里面点击跳转，【跳转的这个页面没有在菜单栏的地址】，然后我想要返回上个页面，我就又点击了一遍菜单栏，就出现了这个报错，【虽然没什么特别的影响，但是看着红色就感觉不是很爽】 解决方式： const originalPush = Router.prototype.push Router.p.
【better-scroll】执行路由跳转时报错：Avoided redundant navigation to current location: “/“
Owen的博客
11-20 258
一、报错 二、报错原因 重复路由跳转。因为点击事件执行了两次，造成了路由重复跳转。 <template> <div> <div class="search"> <input type="text" v-model="keyword" placeholder="请输入城市名或拼音" class="search-input"> </div> <div class="search-content" ref="sear
解决 Avoided redundant navigation to current location 报错问题
hggl_bera的博客
10-10 795
【原因】 重复访问相同路由，replace或者push 【解决办法】 重复访问的方法后加上.catch(() => {})，代码见下图 this.$router.replace({ name: 'cityRulesDetail', query: this.detailParams }).catch(() => {}) ...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
最新发布
口袋的天空的博客
07-09 1211
vue切换主题
vue尚品汇后台管理系统
08-11
尚品汇后台管理系统是一个基于Vue和element-ui组件库开发的项目，它包括登录、首页、品牌管理、平台属性管理、SKU管理、SPU管理、用户管理、角色管理和菜单管理模块。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【Vue】项目：尚品汇后台管理系统(上)](https://blog.csdn.net/weixin_44337386/article/details/123864053)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [基于 Vue.js 实现的 SPA 尚品汇在线电商前后台项目](https://blog.csdn.net/weixin_51008866/article/details/128351123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值