解决router重复push报错

it's all you

已于 2024-01-23 22:49:37 修改

阅读量989

点赞数 11

分类专栏： Java开发Bug记录文章标签： vue

于 2024-01-23 22:48:07 首次发布

本文链接：https://blog.youkuaiyun.com/i_for/article/details/135794900

版权

vue-router重复push报错解决

一、报错情况
二、解决
- 1、重写push方法
- 2、代码解释（来自讯飞星火AI）

一、报错情况

情况复现：使用router跳转时，router会有一个历史记录栈，当新的push元素和上一次最后push的元素一致，那么会报以下错误

vue-router.esm.js:1675 Uncaught (in promise) 
NavigationDuplicated {_name: 'NavigationDuplicated', name: 'NavigationDuplicated'}
name
: 
"NavigationDuplicated"
_name
: 
"NavigationDuplicated"
[[Prototype]]
: 
Error

在这里插入图片描述

二、解决

1、重写push方法

在router的index.js中重写push方法

// 重写push方法
const originalPush = VueRouter.prototype.push

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

it's all you

关注关注

11
点赞
踩
12

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

解决vue-router跳转重复路径报错问题

weixin_45932733的博客

12-02

3104

在最近写代码时发现，我的路由跳转重复路径后，报错如下,问题可能是官方当前版本问题，所以解决方案如下 let path = this.$route.path let newpath = "/home" if (path ==!newpath) { this.$router.push(newpath) } Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".

解决路由重复点击报错问题

weixin_46932940的博客

04-23

613

import Vue from 'vue' import VueRouter from 'vue-router' import Login from '@/views/login/router/login' import HomeRoter from '@/views/Homes/router/childrens' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/login' },

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

vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw

一个喜欢什么都研究一下的小小后端程序员

11-06

3475

vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw

vue3后台系统动态路由实现

weixin_40348267的博客

01-09

1112

动态路由的流程：用户登录之后拿到用户信息和token，再去请求后端给的动态路由表，前端处理路由格式为vue路由格式。

$route.push()多次点击跳转报错问题

qq_52693197的博客

05-11

2810

1.出现的问题：当我们在多次点击this.$route.push()方法以后会出现一下报错：出现上述的问题是vue-router：“^3.5.3"最新出的vue-router引入了promise(当我们点击了router.push()以后返回的是一个promise对象。 2.解决的方案： 1.通过给push方法传递相应的成功，失败、的回调，可以通过捕获到当前的错误，可以解决(但不是最根本的方法),将来在别的组件中push|replace.编程式导航还是有类似的错误。 2.重写route.

调用$router.push()时报出Uncaught (in promise)错误

weixin_42761614的博客

01-28

1708

用this.$router.push()时会返回一个异常，那是因为用push或者replace时会返回一个promise对象，而并没有捕获所以有Uncaught （in promise）错误，因此我们只要捕获就好了第一种方法是直接捕获在push()后调用一个catch方法 this.$router.push(this.path).catch(err=>err) 第二种方法是重写原型中的push方法 import Router from 'vue-router' const original.

Vue中使用[$router.push]重复点击报错解决方案

VCLife

07-30

2041

$router.push() 重复点击的时候会报错,这个错误老早之前也是没有的,后来router更新了一次有了为什么会报这个错误,为了防止重复渲染组件,抛出来的一个错误那么如何解决?

解决相同路由跳转时候的报错情况

weixin_58498354的博客

08-18

801

解决相同路由跳转时候的报错情况

vue-router重写push方法,解决相同路径跳转报错问题

10-14

为了解决这个问题，我们需要重写Vue-Router的`push`方法。首先，我们要导入Vue和Vue-Router库： ```javascript import Vue from 'vue' import Router from 'vue-router' ``` 然后，我们需要保存Vue-Router原型链...

router.push报错

最新发布

02-09

### 解决 `router.push` 报错的方法当遇到由于冗余导航引起的 `vue-router` 报错问题时，可以通过重写 `VueRouter.prototype.push` 方法来捕获并忽略这些错误。具体实现如下： ```javascript // 放置在路由配置...

vue 菜单路由push报错问题

weixin_38355349的博客

02-25

1390

问题： this.$router.push(’/upload’);点击跳转成功但控制台报出如下错误 vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated 解决方法： import VueRouter from 'vue-router' // 过滤如下...

vue-router 重复调用 push 函数跳转到同一个路由地址报错的问题

m0_61679135的博客

12-05

777

终端报错信息解决方案 // src/router/index.js 路由模块 Vue.use(VueRouter) // 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题 const originalPush = VueRouter.prototype.push // 覆盖掉 vue-router 原生的 push VueRouter.prototype.push = function push(location) { return originalPush.call(t..

VUE this.$router.push(‘/article‘) 报错问题

m0_49811662的博客

07-16

675

[Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca 问题：[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current location (”/article") is not allowed" 红框为如今所处.

$router.push 不生效的问题

滴水石穿

07-14

1464

本问题的发生和解决显示，vue代码在执行路由操作时，不是同步阻塞型的，而是异步非阻塞型。即调用 this.$router.push 代码后，一方面开始准备跳转，同时代码也继续向下执行，一旦二者有路由冲突，那么结果就是难以预料的了。

this.$router.push 提示错误 Cannot read property ‘push‘of undefined

zilvzsy的博客

06-30

3938

记笔记，免忘记！方便自己后续查阅！问题如下图：因为我这里是等待两个请求请求完成后再执行跳转方法，所以代码如下： setTimeout(function(){ localStorage.removeItem('taskQuery'); this.$router.push({path:'/configure'}) },1000) 但是运行之后，报错..

vue出现Error:router.push is not a function的解决方案

fqi_an_的博客

04-19

1008

Error:router.push is not a function解决方案（下面是正确代码）

Vue32中出现报错router.push is not a function解决方案

qq_51382904的博客

12-11

1345

【代码】Vue32中出现报错router.push is not a function解决方案。

vue中的$router 和 $route的区别

liudachu的博客

09-29

562

vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的

使用dva routerRedux.push跳转页面携带参数时请求两次问题

x先生的博客

11-08

8916

发现问题页面使用routerRedux.push([path])进行跳转，部分页面跨页传参也是使用这种方式，然后发现了一个很奇怪的现象，部分页面接受参数后，执行两次subscriptions，所以导致两次请求。在dva的issues里面看到了2016年有人提过这个问题，并被列为bug解决了。很奇怪在这为什么复现了。寻找原因想知道从页面加载到请求结束到底发生了什么，这就要借助工具了----Re...