vue router 点击同一路由多次或是push的路由是当前界面的url，报错解决方法

最新推荐文章于 2024-07-09 12:32:15 发布
原创 最新推荐文章于 2024-07-09 12:32:15 发布 · 810 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决Vue Router中多次点击同一路由导致错误的方法。通过覆盖VueRouter的push方法，实现错误捕获并阻止其传播，确保了用户体验不受影响。

// 多次点击同一路由报错

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (location) {

  return originalPush.call(this, location).catch(err => err)

}

把这个放在路由router的页面

解决router重复push报错
i_for的博客
01-23 1136
在自定义的Router.prototype.push方法中，首先将原始的Router.prototype.push方法保存在originalPush变量中。在新定义的push方法中，调用了原始的Router.prototype.push方法，并将location参数传递给它。这样，如果在路由跳转过程中发生错误，可以处理该错误并进行相应的处理。总之，这段代码的作用是重写了Router.prototype.push方法，以便在执行路由跳转时添加自定义逻辑，并捕获并处理可能出现的错误。（内容由讯飞星火AI生成）
解决vue多次点击同一个路由报错问题
lbx1260103425的博客
11-26 3106
Router.prototype.replace = function push(location) { return originalPush.call(this, location).catch(err => err) } const originalReplace = Router.prototype.push Router.prototype.push = function push...
Vue的router跳转问题
小胡仙的博客
07-19 422
1.重复跳转报错问题 在router=>index.js中添加 //解决router重复点击报错的问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 2.怎样才能允许重复跳转（跳转相同路由时，刷新当前路由）
[vue] vue router 点击同一路由多次或是push的路由是当前界面的url，报错解决方法
qq_14993591的博客
11-17 669
// 多次点击同一路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) {undefined return originalPush.call(this, location).catch(err => err) } 把这个放在路由router的页面 参考： https://blog.youkuaiyun.com/sunlizhen/article/
vue路由跳转问题
Huang58_com的博客
02-16 379
路由跳转问题 Vue路由的跳转的四种方式 问题描述：在使用this.$router.push和this.$router.replace的时候发生了报错，且不会跳转到对应的页面, 控制台会出现这个报错，但是不影响正常使用，但是又错误还是要解决的 解决这$route跳转路由问题 报错信息：Avoided redundant navigation to current location 代码： // 这样控制台就能避免路由跳转带来的错误 const originalPush = VueRouter.protot
vue router小技巧
YoungMan_09的博客
06-07 1402
vue路由切换页面从顶部开始展示，解决路由重复跳转报错问题
vue-router重写push方法,解决相同路径跳转报错问题
10-14
此外，有时候我们可能会遇到一种情况：使用`router-link`或`router.push()`访问同一路由，URL改变但页面内容并未刷新。为了解决这个问题，我们可以监听路由的变更并手动触发组件的更新。这可以通过在`router-link`的...
解决VUE-Router 同一页面第二次进入不刷新的问题
11-20
这些方法可以帮助你解决Vue-Router中页面二次进入不刷新的问题。根据具体情况，可以选择最合适的解决方案。如果希望避免全局页面重载，使用动态参数或监听路由变化通常是较好的选择。而如果参数需要在刷新后仍然可用...
解决vue-router 嵌套路由没反应的问题
10-14
解决这个问题的方法是为`/course`路由添加一个组件，比如`Course`，并在该组件的模板中包含`<router-view>`。更新后的`route.js`应如下所示： ```javascript const routers = [ { path: '/', component: App, ...
精选资源
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
Vue2项目中重写push和replace方法
m0_62508027的博客
05-12 1168
重写push和replace方法，以解决重复执行同一操作，抛出 NavigationDuplicated 的警告错误的问题
Vue-router 报错NavigationDuplicated的解决方法
11-21
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } const originalReplace = VueRouter.prototype.rep
探究vue-router重复路由跳转问题
flying meng的菜鸟居
10-22 5986
有时候你在vue项目中做路由跳转时，可能是比如elementUI的memn同级跳转，也可能是比如root.vue中做身份校验跳转，总之，可能会遇到这样的报错： Uncaught (in promise) NavigationDuplicated:... 你说他难看吧，也确实难看。但要说是个错误吧，也不影响正常逻辑。但是有错误还是要解决的。 这个问题其实是vue-router3版本更新后和老的写法之间的兼容问题。其实有三种解决方法。网上的解决方案几乎都是第一种，但这样是会出问题的！ 先说导致问题的原因：
多次执行相同的push问题(如何解决)
最新发布
一只猫
07-09 519
push是VueRouter.prototype的一个方法，在router中的index重写该方法即可
路由跳转的四种方式
rfalcon的博客
10-21 2632
query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 1.router-link 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,
vue路由的封装与使用
scclp的博客
11-30 4471
封装路由首先要明确的是业务需求，以及路由的基本原理 下面从几个点进行阐述： 1.关于路由的目录结构 router index.is routes is index.js文件里面存放的是关于路由的一些基本配置 index.js import Vue from 'vue' import VueRouter from "vue-router" import routes from '/routes' Vue.use(VueRouter) //......
VueRouter解决重复点击导航路由报错,Router路由跳转错误
qq_40591925的博客
05-19 657
push方法： const originalPush = VueRouter.prototype.push // 修改 原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err=>err) } replace方法： const originalReplace = VueRouter.prototype.r..
const originalPush = Router.prototype.push；
SiYuHuang_SCDN的博客
01-13 674
vue 路由相关
vue路由跳转
qq_40983361的博客
08-31 265
解决重复跳转报错 constoriginalPush=Router.prototype.push Router.prototype.push=functionpush(location){ returnoriginalPush.call(this,location).catch(err=>err) } 正常跳转 routes.js {path:'/homePage',component:HomePage}, vue中 this.$router.p...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值