Vue项目中常见问题(3)重写push|replace,解决编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误

最新推荐文章于 2023-07-28 12:46:52 发布
最新推荐文章于 2023-07-28 12:46:52 发布
阅读量925 收藏
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124748077
版权
本文探讨了在Vue项目中遇到的NavigationDuplicated警告错误，当编程式导航到相同路由（参数不变）时多次执行所导致的问题。文章提供了两种解决方案：一是为push或replace函数添加成功和失败的回调；二是重写Push和Replace方法，以从根本上解决问题。在router/index.js中重写这两个方法可以一劳永逸地避免此类警告。
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

问题:编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

为什么会出现这种现象:

解决办法:

方法一: 是给push或者replace函数，传入相应的成功的回调与失败的回调

方法二:重写Push | Replace

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

 

问题:编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

最低0.47元/天 解锁文章
学无止境QAQ
关注
专栏目录
Vue3.0性能优化之重写虚拟Dom
summer_zhh的博客
08-18 3078
Vue3.0中的性能优化 2020年4月21号，Vue的作者尤雨溪在直播中分享了Vue.js 3.0 Beta最新进展, 向我们展示里Vue3中的六大亮点，其中首先提到的就是Performance性能。 Performance：性能更比Vue 2.0强。 Tree shaking support：支持对无用模块的“剪枝”，实现按需打包 Composition API：基于函数的组合式API Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
vue push方法重写解决路由错误问题
wjw0125的博客
06-18 1416
vue重写路由push方法 /** 重写路由的push方法 解决，相同路由跳转时，报错 添加，相同路由跳转时，触发watch (仅限string方式传参，形如"view?id=5") */ const routerPush = Router.prototype.push Router.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; i
解决vue项目中搜索框多次点击产生的报错——重写push和replace
m0_51144154的博客
12-21 872
解决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路由跳转成功又跳回来(刷新)解决方法（尚品汇）
only_learn的博客
10-26 4191
在跟着写尚品汇三级联动路由跳转的时候遇到这个问题，就是在我点击商品跳转的时候，路由会跳转并且一瞬间回到home，浏览器会刷新。
Vue-router路由跳转 页面的状态保留 与 强制刷新页面
热门推荐
芝芝为荔枝
02-08 1万+
1、遇到的问题 当我们使用 Vue 去实现一个比较大型的SPA单页面的应用时候，通常使用到了vue-router，此时会出现一种场景：左侧是菜单、右侧是页面内容，点击不同的菜单时有时候需要对页面的内容进行以下三种操作 1. 保留状态（例如新增页面 需要保持状态） 2. 刷新页面（列表页面） 3. 根据情况进行 保留 或者 刷新（两种情况动态判断） 对以上问题进行探讨，需要用到 vue-router 中的 <keep-alive> 标签 和 路由跳转携带参数 去解决问题。 2、解决 2.1 对.
3. Vue 编程式路由跳转多次点击报错问题
白怀宇的博客
06-21 1029
Vue 编程式路由跳转多次点击报错问题 概述 使用编程式路由进行跳转时，控制台报错，如下所示。 问题分析 该问题存在于Vue-router v3.0之后的版本，由于新加入的同一路径跳转错误异常功能导致。 解决方法 重写 $router.push 和 $router.replace 方法，添加异常处理。 //push const VueRouterPush = VueRouter.prototype.push VueRouter.prototype.push = function push (t
11.14 尚品汇 day01 脚手架，路由命名，路由跳转，传参，props传参，重写push,replace
m0_56356342的博客
11-14 140
5.1路由的一个分析 确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件 2个非路由组件|四个路由组件 两个非路由组件：Header 、Footer 路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。解决：在路由配置页的/:searchWord/
编程式跳转（参数不变），多次抛出NavigationDuplicated警告错误？
yuroll的博客
03-23 183
提示错误代码：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search/dd？".
编程式路由跳转（push/replace）多次点击会报错问题
victorylip的博客
03-23 382
---前端小白记录学习中、工作中遇到的知识点。问题答案源自尚硅谷尚品汇项目。
vue window.location.replace替换之后又自动跳回去
tan47325的博客
06-13 2154
vue window.location.replace替换之后又自动跳回去
前端路由原理及实现
qq_38217940的博客
04-11 3790
vue技术栈经典面试题
vue刷新页面方法
Altaird的博客
08-17 483
（1）reload location.reload(); reload() 方法类似于你浏览器上的刷新页面按钮。 （2）replace window.location.replace("") replace()方法用一个新的地址替换当前地址。 （3）provid 和 inject <template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </templat
前端路由
良_123的专栏
05-15 644
注：一般情况下不用AngularJS自带的这个路由，因为它不能完成深层次的嵌套 内容介绍，为什么要使用前端路由？ 在2005左右，兴起了一种叫做ajax的技术，有了ajax之后，我们向服务端提交数据的时候就不再需要使用from表单去提交了，因为from表单之间的提交会导致页面之间的切换，也就是说无法实现单页应用。  ajax的缺陷  1、不会在浏览器里面留下历史记录  2、用户无
报错：().then is not a function
最新发布
AllenChou869的博客
07-28 1022
发生这种报首先检查是否是promise对象，是否具有http.post 或 http.get方法，如果不是，则不能这样写。
vue中页面刷新的方法
qq_41186730的博客
12-16 534
1.使用 Location 对象提供的方法 window.location.reload() 但是这种方法，有的小米手机不会刷新。 2.使用vue路由提供给我们的方法 this.$router.go(0) 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面 但是这种方法，有的小米手机不会刷新。苹果手机也不会刷新 3...
Vue——vue中replace路由替换写法
qq_43201350的博客
10-08 6389
Vue——vue中replace路由替换写法
vue常用路由router之“push和replace”
空投在我怀里的博客
03-11 1万+
一、<router-link>push是追加历史记录，replace是替换当前记录 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link replace .......>News</router-link> 二、案列展示： 1.案列1 <template>
修复Vue项目编程式导航bug与重写push/replace方法
"Vue.js大型电商项目尚品汇的前台开发第二天，主要涉及的问题是解决编程式导航的`NavigationDuplicated`错误，并讨论了如何重写`push/replace`方法来避免该错误。" 在Vue.js大型电商项目开发中，常常会遇到各种挑战...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值