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

最新推荐文章于 2024-08-20 21:03:22 发布

RoGroovy

最新推荐文章于 2024-08-20 21:03:22 发布

阅读量215

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/RoGroovy/article/details/132932938

vue-router 专栏收录该内容

79 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在Vue开发中遇到用户快速点击相同路由导致的NavigationDuplicated错误的两种解决方案：1) 使用try-catch块捕获并处理错误；2) 在beforeEach导航守卫中拦截并控制重复路由跳转，避免不必要的错误提示和页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

方法一：添加try-catch块

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

try {
   
   
  // 跳转到相同的路由
  router.push({
   
   
    path: '/your-ro

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RoGroovy

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

vue 解决addRoutes多次添加路由重复的操作

10-14

主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 跳转同一路由不刷新问题解决(相同path不同query)

01-08

前言遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注

1 条评论您还未登录，请先登录后发表或查看评论

Uncaught (in promise) Error: Avoided redundant navigation to current location

JessicaLi的博客

12-07

961

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-解决跳转重复路由报错问题

L15712580331的博客

03-13

847

完美解决VUE项目跳转重复路由报错问题，超简单！！！

vue路由重复点击同一个路由报错如何解决？

ksyjy的博客

05-19

1149

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重复点击同一个路由报错问题解决

D_ylong的博客

11-02

1559

在新版本的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(推荐.

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提供了一个方法可以在路由变化时...

常见问题之vueRouter的重复跳转问题

weixin_44191425的博客

09-22

500

今天项目中遇到了一个问题，当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

1587

报错： 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

3296

最近在写项目的偶然发现了一个小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

683

vue-Router路由重复跳转报错

vue路由重复跳转报错

奋斗的小青年

07-15

515

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

423

【代码】解决vue中编程式路由重复跳转路由的错误！！

vue中 router路由器重复跳转报错

qq_53374893的博客

08-20

234

完美解决连续点同一个路径报错 ,原理就是catch了。在注册路由器之前，重写原型对象的方法。

解决vue重复路由

weixin_52236586的博客

04-23

682

【代码】解决vue重复路由。

vue2中编程式路由重复跳转同一个路由报错解决方法

longder11的博客

09-01

764

在vue2中我们有时候多次点击导航式路由跳转到同一路由时会报错。