vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.
一、原因
- 在使用
this.$router.push
进行路由的跳转时,出现如下报错:
image - 原因:重复路由跳转,
比如说当前路由是商品详情页面/detail
,
但是点击按钮进行this.$router.push
操作,
要跳转的还是详情页面/detail
。
二、解决报错
- 升级vue-router版本为3.0即可解决,项目目录下运行命令:
- 修改VueRouter原型对象上的push方法,在router文件夹下的index.js中加入如下代码:
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
image
三、原理
原理解析
-
location
这个location
就是一个保存了当前要跳转路径的对象;
-
call
的使用call()
函数可以在调用函数的同时,
来改变this
的指向,常用于实现继承。
第一个参数this
,
由于call
处于原型对象内部,
所以此处this
指向的是当前VueRouter
的实例对象。
而originalPush
指向的是
VueRouter.prototype.push
。
旨在于调用当前VueRouter
实例对象中的push
方法。
第二个参数location
,
在方法调用时传入获取到的location
。
- catch
链式调用catch
方法。
旨在在方法执行时,捕获错误。
在js机制中,catch
捕获到Exception
时,
代码还会继续向下执行。所以此处的catch
未作任何操作,
代码也会继续向下执行。
和抛给浏览器的错误其实时一致的:
网友评论