vue中路由点击两次报错问题，加个判断

最新推荐文章于 2024-04-12 09:33:05 发布
最新推荐文章于 2024-04-12 09:33:05 发布
阅读量457 收藏 6
点赞数 9
文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63229791/article/details/134799380
版权 
methods: {
    //点击菜单路由跳转
    clickMenu (item) {
      //当页面路由与点击后要跳转的路由不一致才允许跳转，且不是重定向情况
      if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
        this.$router.push(item.path)
      }
    }
  },

比较好记
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue如何解决循环引用组件报错的问题
10-17
在Vue开发过程中，循环引用组件有时会导致报错，特别是当组件相互依赖，形成循环引用时。Vue框架在处理这种情况时可能会出现"Unknown custom element"的警告，提示组件未正确注册。这个问题通常源于组件实例化顺序与...
vue安装遇到的5个报错及解决方法
10-16
在本文中，我们将深入探讨Vue.js安装过程中可能会遇到的五个常见错误，并提供相应的解决方案。这些错误包括Vue命令未识别、安装淘宝镜像出错、运行`npm run dev`失败、项目路径错误以及npm安全漏洞警告。让我们逐一...
vue2 解决路由重复点击的报错
最新发布
P_ang__的博客
04-12 242
在路由跳转的时候加上 .catch((err) => {}在main.js 文件中。
vue路由重复点击跳转报错
qq_45768050的博客
03-11 1346
vue路由重复点击跳转报错
vue router连续点击多次路由报错
weixin_47013351的博客
04-17 2041
在编程式导航跳转时候，连续点击多次会报NavigationDuplicated错误 this.$router.push({name: "search"}); 出现这种错误原因是因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。 这时如果我们加入成功和失败的回调，就不会报错： this.$router.push( { name: "search" }, //成功回调 () =&g
vue路由重复跳转报错
奋斗的小青年
07-15 454
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-router点击切换路由报错
weixin_34179762的博客
05-05 965
报错: 报错原因： 设置mode:history 解决方法： 将router的mode设置为‘hash'就不报错了 原因下次再分析
解决vue 引入子组件报错的问题
10-18
为了解决这个问题，我们需要遵循Vue的组件命名约定。Vue推荐使用kebab-case（短横线分隔命名）或者PascalCase（驼峰命名）来命名自定义组件。考虑到JavaScript中对象属性的写法，我们可以将组件名改为PascalCase，...
解决vue 按钮多次点击重复提交数据问题
08-27
在 Vue 项目中，按钮多次点击重复提交数据问题是一个常见的问题，本文将通过实例结合的形式详细介绍解决该问题的方法。 问题描述 在 Vue 项目中，我们经常会遇到按钮多次点击重复提交数据的问题。这是因为用户可以...
vue 解决循环引用组件报错的问题
10-18
然而，在循环引用的情况下，两个或多个组件互相引用，可能会导致组件的加载顺序出现问题，从而导致错误。 例如，假设我们有两个组件`ComponentA`和`ComponentB`，它们都试图在各自的模板中使用对方。如果`Component...
vue中使用ElementUI导航栏，点击第二次报错
qq_44891434的博客
02-26 438
vue中使用ElementUI导航栏，点击第二次报错 加入一下相关代码 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 解决重复点击导航路由报错 const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, loc
路由跳转重复点击报错
weixin_52371073的博客
08-08 476
这是Vue-Router常见的问题，我们重复点击同一个路由会造成router延时，路由冗余，在点击事件结束后抛出一个catch即可
解决Vue路由重复跳转报错
qq_65388624的博客
08-24 3429
解决Vue路由重复跳转报错
vue路由重复点击报错
weixin_47190975的博客
05-24 431
路由重复点击报错
Vue路由 $router.push 跳转点击两次报错
轻风细雨_林木木
01-05 2612
vue路由$router.push跳转点击两次报错 错误说明: vue项目中，如果使用$router.push跳转到一个相同的路由，就会报错： 原因: vue-router在3.1.0版本之后，push和replace方法会返回一个promise对象，如果跳转到相同的路由，就报promise uncaught异常。 解决办法： 1.降版本 使用vue-router 3.1.0之前的版本就不会有这个错误。 2.使用catch捕获异常 在使用push或者replace的时候，需要使用catch来处理异常 th
重复点击同一个菜单路由 报错NavigationDuplicated
Beam
12-06 955
现象 连续点击同一个路由，第二次点击时报错NavigationDuplicated。 如图所示： 对比 另一个系统没有出现这个问题，对比两个系统使用的element-ui的版本果然不同。 解决 于是查看当前系统的package-lock.json中所使用的element-ui版本为2.8.2 "element-ui": { "version": "2.8.2", "resolved": ...
router编程式导航（push-replace）及同一事件触发多次路由跳转报错
m0_68320270的博客
07-26 615
1.路由跳转 2.push与replace的区别 3.路由传参（name-path） 4.多次路由跳转报错
vue路由点击事件跳转两次的bug
qq_43959639的博客
10-01 782
原因a标签没设置src="javascript:;"
vue页面路由跳转重复报错的问题
多看书少吃饭的博客
06-20 1221
vue页面路由跳转重复报错的问题
vue ruouter 两次跳转同一个地址报错
09-01
Vue Router 是 Vue.js 官方的路由管理器，用于实现 SPA（Single Page Application）的前端路由功能。在 Vue Router 中，通过使用路由的 `push`、`replace` 方法可以实现页面跳转。当我们多次调用 `push` 或者 `replace` 方法跳转到同一个地址时，就会出现报错。 这个报错是因为当我们多次跳转到同一个地址时，Vue Router 会认为是一个重复的跳转操作，而默认情况下 Vue Router 是不允许重复跳转的。这样设计是为了避免在 SPA 中出现无限循环的跳转，造成浏览器崩溃。 如果我们确实需要多次跳转到同一个地址，那么我们可以通过修改路由的 `push` 或者 `replace` 方法的配置来解决这个报错。在跳转时，我们可以传递一个 `ignoreDuplicateNavigation` 的配置项，将其设置为 `true`，这样就可以避免报错了。例如： ```javascript // 在路由跳转时，传递一个 ignoreDuplicateNavigation 的配置项 router.push({ path: '/same-path', ignoreDuplicateNavigation: true }) ``` 通过以上方式，我们就可以实现多次跳转同一个地址而不报错了。但是在使用时，我们需要明确自己的需求，确保不会因为重复跳转而出现无限循环的问题。同时，在设置 `ignoreDuplicateNavigation` 为 `true` 时，也需要慎重考虑，确保不会影响到其他业务逻辑的正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值