解决Vue重复点击相同路由引发的NavigationDuplicated错误

最新推荐文章于 2024-08-20 21:03:22 发布
最新推荐文章于 2024-08-20 21:03:22 发布
阅读量271 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RoGroovy/article/details/132932938
本文介绍了在Vue开发中遇到用户快速点击相同路由导致的NavigationDuplicated错误的两种解决方案：1) 使用try-catch块捕获并处理错误；2) 在beforeEach导航守卫中拦截并控制重复路由跳转，避免不必要的错误提示和页面渲染。

在使用Vue进行开发时，我们经常会遇到用户在快速点击相同路由时出现NavigationDuplicated错误的情况。这个错误的原因是Vue Router默认情况下会阻止相同路由的重复跳转，以避免不必要的页面渲染和数据请求。

为了解决这个问题，我们可以通过以下方法来处理NavigationDuplicated错误。

方法一：添加try-catch块

最简单的方法是使用try-catch块来捕获NavigationDuplicated错误，并在catch块中进行处理。我们可以在路由跳转的地方使用try-catch块，如下所示：

try {
   
   
  // 跳转到相同的路由
  router.push({
   
   
    path: '/your-ro
了解本专栏 订阅专栏 解锁全文
vue 解决addRoutes多次添加路由重复的操作
10-14
主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 跳转 同一路由不刷新问题解决(相同path不同query)
01-08
前言     遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
Uncaught (in promise) Error: Avoided redundant navigation to current location
JessicaLi的博客
12-07 981
vue路由报错： Uncaught (in promise) Error: Avoided redundant navigation to current location 原因： 多次点击跳转同一个路由是不被允许的 解决办法： 在引入vue-router的js文件里加上如下代码即可： //push const VueRouterPush = Router.prototype.push Router.prototype.push = function push (to) { ..
Vue-Router解决重复点击路由报错
刘一帆的博客
03-14 732
在代码编写中，发现出现路由重复点击后报错的问题（Vue2），查询资料，使用push、to、replace皆没有解决根本问题，后通过学习，添加以下代码，完美解决重复路由报错问题。在main.js加入此代码即可解决。
VUE-解决跳转重复路由报错问题
L15712580331的博客
03-13 896
完美解决VUE项目跳转重复路由报错问题，超简单！！！
vue路由 重复点击同一个路由报错 如何解决？
ksyjy的博客
05-19 1165
Element-ui 重复点击同一个路由 会报错:NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”} 解决办法： 在router/index.js里重写Router.prototype.push import Router from 'vue-router' //需要添加的代码 const originalPush = Router.prototype.push; Router.pro
vue路由key重复
01-14
### 解决 Vue 路由 Key 值重复...此段 JavaScript 代码展示了如何拦截并过滤掉因尝试访问相同地址而导致的 “navigation duplicated” 错误消息，防止其干扰用户体验的同时也间接解决了某些情况下 key 复用引发的问题。
为什么vue2路由点击两次会报错
12-29
在 Vue2 项目中，当用户快速连续点击同一个路由链接时，可能会触发导航守卫多次执行，进而引发错误。这种情况通常发生在浏览器尝试解析相同的 URL 或者目标路由与当前路由相同时。 具体来说，`vue-router` 在处理...
点击当前路由的菜单项会使页面报红，该如何解决
最新发布
02-25
- 当点击当前路由对应的菜单项时，尝试重复跳转到相同路径，框架（如 Vue Router）会抛出 `NavigationDuplicated` 警告。 2. **组件状态冲突** - 路由未正确判断激活状态，导致组件重复渲染或状态异常。 3. **...
navigationduplicated: avoided
06-28
这个错误是由于路由重复导航(即浏览器前进或后退时路由不断变换)而引发的。当使用vue-router库时，路由的变化会引起Vue实例的重复渲染，从而导致这个错误。为了解决这个问题，Vue.js提供了一个方法可以在路由变化时...
Vue重复点击同一个路由报错问题解决
D_ylong的博客
11-02 1601
在新版本的vue-router中，重复点击同一个路由会出现以下报错 ： 这个问题时vue-router 3.2.0版本的一个小Bug 有三种解决办法： 第一种： vue-router降级处理(不推荐) npm i vue-router@3.0.7 第二种： 直接在push方法最后添加异常捕获 （捕捉错误提示但不显示） @click="$router.push('/home/searchPopup').catch(err=>{})" 第三种： 直接修改原型方法push(推荐.
常见问题之vueRouter的重复跳转问题
weixin_44191425的博客
09-22 515
今天项目中遇到了一个问题，当token失效之后要调回登录页，由于项目没有登录页，需要跳转回官网页面，所以出现了如下问题 然后需要在router的文件里面添加上以下代码便可以解决这个问题 const VueRouterPush = VueRouter.prototype.push VueRouter.prototype.push = function push (to) { return VueRouterPush.call(this, to).catch(err => err) } ...
vue路由重复问题
Dog Sun的博客
06-17 1607
报错： Avoided redundant navigation to current location: Vue.use(VueRouter);后面加 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ...
Vue路由重复跳转怎么解决(当前页面跳转当前路由会报错)
u014636333的博客
04-26 3326
最近在写项目的偶然发现了一个小bug，就是在本页面进行路由跳转的时候，如果跳转的还是本页面就会报错 这个时候就需要我们添加下面的代码就可以解决 1.先获取原型对象身上的跳转（push）方法 const originalPush = VueRouter.prototype.push 2.然后再进行一下修改 VueRouter.prototype.push = function push(location){ return originalPush.call(this, location).catch(err
关于Vue-router跳转路由重复报错
m0_51754096的博客
11-17 715
vue-Router路由重复跳转报错
vue路由重复跳转报错
奋斗的小青年
07-15 539
1.el-tootip的content中不支持，用this.$router.push()代替 2. vue中防止跳转路由本身（自己跳转自己）router.js中添加以下代码片段 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
解决vue中编程式路由重复跳转路由的错误！！
Fighting0923的博客
04-11 463
【代码】解决vue中编程式路由重复跳转路由的错误！！
vue中 router路由器重复跳转报错
qq_53374893的博客
08-20 283
完美解决连续点同一个路径 报错 ,原理就是catch了。在注册路由器之前，重写原型对象的方法。
解决vue重复路由
weixin_52236586的博客
04-23 702
【代码】解决vue重复路由。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值