vue 菜单路由重复点击报错

最新推荐文章于 2025-03-22 23:36:09 发布
最新推荐文章于 2025-03-22 23:36:09 发布
阅读量371 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16672095/article/details/106352527
版权


解决方法：

在当前页面添加:

import Router from 'vue-router'
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
};
 

vue3 - vueRouter4 路由导致警告报错 [Vue Router warn] No match found for location with path “x“（vue3+router4）
高级前端工程师
05-08 4798
vue3，router4，路由，报错，警告，vue-router4路由，vue3路由出现警告，vue-roter4实现动态加载路由，权限动态设置路由，动态路由，刷新页面报错，跳转页面警告，VueRouter4， [Vue Router warn] No match found for location with path，详解vue-router中matcher，详细解决方案，依旧无法解决一直报错，解决Vue3.0 页面刷新，vue3 addRoute 动态路由 页面刷新后 路由失效，addRoute，浏览
vue 重复点击菜单，路由重复报错
pinbolei的博客
04-12 885
报错信息 vue-router在3.0版本以上时，重复点菜单，控制台会报错，虽然不影响使用，但是最好处理下这个问题，不然也可能会影响调试其他问题。 报错原因 vue-router在3.0版本以上时 ，回调形式改成了promise api，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的报错 node_module/vue-router/dist/vue-router.js 搜VueRouter.prototype.push 解决方法 1.降低vue-router的版本 npm i v
解决首页面路由重复点击报错
weixin_42937036的博客
08-14 313
多次点击路由跳转按钮，在控制台会报错，虽然对项目的运行没有什么影响，但总会觉得代码写的不够好 解决办法：在导入路由的文件中加入下面代码 /** * 修改首页面路由重复点击报错 */ const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => er
关于vue路由重复点击报错
最新发布
qq_59404531的博客
03-22 226
我们只需要在router配置文件中添加这个代码即可解决。vue配置完路由后重复点击同一个组件就会报错。注意：这个代码必须写在vue注册上面才行。以上即可解决vue路由重复点击报错问题。捕获这个错误，不让它显示。
解决：vue2.x，在本页面时点击当前路由控制台报错
波客
01-10 285
如果有用，请点个赞，或者留言：有用，感谢各位???? this.$router.push({path: '/' + item.url}).catch(err => { // 重复点击相同的url }) 通过代码跳转的只需要加个.catch(()=>{})即可
vue使用elementui的菜单，重复点击相同的菜单报错
qq_40178497的博客
07-21 706
vue使用elementui的菜单，重复点击相同的菜单报错，报错页面如下： 解决办法： 在项目src/router/index.js文件中修改，在Vue.use(Router);前面添加： const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue路由在浏览器重新打开一个页面
weixin_45884508的博客
02-27 848
这是JavaScript中原生的window.open()方法，用于打开一个新的浏览器窗口或标签页。这里将上一步解析出的目标路由URL作为参数传入，并且以'_blank'作为目标窗口的名称，表示在新的标签页中打开。是vue-router提供的一个方法，它可以根据给定的路由信息（这里是以名称' screen'标识的目标路由），返回一个解析后的路由信息对象。这个对象包含完整的href属性，即目标路由的完整URL路径。：调用打开的新窗口的focus方法，使其获取焦点，即确保新打开的标签页被激活显示。
vue 当前路由重复点击跳转报错
YanHie的博客
11-26 1789
当菜单路由重复点击时，会出现以下报错： 虽然没有什么影响(不知道深层有什么影响，页面运行反正没啥问题)，但是有个报错看着就毕竟闹心。 有以下解决方案： router配置中添加代码块不再报错 // 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location,
解决ElementUI导航栏重复点菜单报错问题
qq_52499703的博客
08-31 841
解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
vue 点击路由跳转（地址重复）报错以及路由跳转滚动条未回滚到顶部问题
郝峰vip的博客
12-08 669
前言 最近在用vue-cli4 , vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。 step 一，路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,或者刷新报错 main.js import Router from 'vue-router' const routerPush = Router.prototype.push Router.prototype.push = function pu
vue 解决路由只变化参数页面组件不更新问题
10-16
在Vue.js应用中，路由是页面之间导航的关键组成部分。当你使用Vue Router进行页面导航时，通常情况下，当路由路径发生变化时，对应的组件也会随之更新。然而，在某些情况下，如果路由只变化了查询参数（即URL中`?`...
路由重复点击报错
weixin_42232325的博客
01-19 694
1.解决方案： 解决方案有以下两种： 1.避免重复点击 2.可重复点击，并点击即可刷新页面 2.实现 第一种：避免重复点击； 在 router 的配置文件里下添加一下代码 import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).c
重复点击事件（仅限于路由）
IT_iosers的博客
08-04 188
1、放入router文件下的index.js中 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); };
路由跳转重复点击报错
weixin_52371073的博客
08-08 539
这是Vue-Router常见的问题，我们重复点击同一个路由会造成router延时，路由冗余，在点击事件结束后抛出一个catch即可
解决Vue路由重复点击报错问题
hahaha921的博客
07-06 368
ps：此项目使用的是VueRouter，这里偷了个懒直接写了router.__proto__，可以写VueRouter.prototype。Vue点击同一个路由会报错：Avoided redundant navigation to current location。解决方法：在路由守卫中添加如下代码。
vue-router为什么会加载两遍dom?_一些优化CSS以提高页面加载速度的小技巧
weixin_39966130的博客
12-11 1023
不久前，我决定改进我的网站的加载时间。它已经加载的相当快，但我知道仍然有改进的空间，其中之一是CSS加载。我将向您介绍整个过程，并向您展示如何提高加载时间。为什么装载时间重要？因为 时间就是金钱 。这句谚语尤其适用于网页加载时间。您的页面加载时间对您的利润有直接影响。人们更倾向于在快速的电子商店买东西，而不是在速度较慢的商店买东西。根据研究毫秒使百万流动网站的改善幅度为0.1秒，旅游网站的转化率及...
【Vue】解决路由切换，页面不更新的实用方法
热门推荐
汪小穆的博客
09-22 6万+
前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
weixin_39834767的博客
12-20 5095
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
vue 解决：点击左侧相同菜单，右侧页面不重新加载的问题
狮子座的男孩
02-29 1528
无论是通过路由组件形成的平台管理系统，还是通过文件配置形成的平台管理系统，都存在通过切换左侧的导航栏而使右侧的页面切换的业务需求；重复点击左侧导航栏的菜单(即：点击左侧导航相同菜单)，右侧页面不重新加载，但左侧切换不同的菜单，右侧页面加载就没有问题;但要在左侧点击相同页面的导航栏(即：已经展示该页面，再点击左侧相同菜单，右侧页面不再重新加载，当然也没进行刷新操作)；修改上述位置代码后，就解决了：点击左侧相同菜单，右侧页面不重新加载的问题；文件，且加载都没有问题(即：页面可以加载，对应的接口也可以加载)；
vue2后台管理系统点击菜单
12-29
### 可能的原因分析 当遇到 Vue2 后台管理系统点击菜单不响应的情况时，可能涉及多个方面的问题。通常情况下，这可能是由于路由配置错误、事件绑定失败或是状态管理出现问题等原因造成的。 #### 1. 检查路由配置 确保每一个菜单项都正确关联到了对应的路径，并且这些路径已经在 `router/index.js` 文件中定义好。如果路径不存在或拼写有误，则点击该菜单不会有任何反应[^2]。 ```javascript // router/index.js 示例 import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/views/Home.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home, }, // 确认其他页面也已在此处注册并设置了正确的path和component属性 ], }); ``` #### 2. 查看控制台报错信息 打开浏览器开发者工具查看是否有任何 JavaScript 错误被抛出。某些类型的错误可能会阻止默认行为的发生，从而导致点击无效果。特别需要注意的是有关于找不到组件或者是动态加载过程中发生的异常情况[^4]。 #### 3. 审核模板中的事件监听器设置 确认在编写 HTML 结构时已经给相应的 DOM 元素绑定了合适的 click 方法。对于使用 Element UI 组件库构建的应用来说，应该按照官方文档说明的方式去处理交互逻辑。 ```html <!-- 使用ElementUI的Menu组件 --> <template> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"> <!-- 此处应保证index值与路由名称一致 --> <el-menu-item index="/example">Example</el-menu-item> </el-menu> </template> <script> export default { data() { return { activeIndex: '/' }; } }; </script> ``` #### 4. 核实 Vuex Store 或者本地存储的状态变更机制 有时候为了实现更复杂的功能需求，会采用全局状态管理模式来同步不同视图之间的数据交换。此时就需要仔细检查 store 中关于导航栏选中状态更新的部分代码片段，防止因为异步操作未完成而导致界面卡顿现象发生。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值