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未作任何操作，
代码也会继续向下执行。
和抛给浏览器的错误其实时一致的：
