重复路由

vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.

一、原因

• 在使用this.$router.push进行路由的跳转时，出现如下报错：
• 原因：重复路由跳转， 比如说当前路由是商品详情页面/detail， 但是点击按钮进行this.$router.push操作， 要跳转的还是详情页面/detail。

二、解决报错

1. 升级vue-router版本为3.0即可解决，项目目录下运行命令：
2. 修改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)
}

三、原理

原理解析

1. location 这个location 就是一个保存了当前要跳转路径的对象；

2. call的使用 call()函数可以在调用函数的同时， 来改变this的指向，常用于实现继承。 第一个参数this， 由于call处于原型对象内部， 所以此处this指向的是当前VueRouter的实例对象。 而originalPush指向的是 VueRouter.prototype.push。 旨在于调用当前VueRouter实例对象中的push方法。 第二个参数location， 在方法调用时传入获取到的location。

3. catch 链式调用catch方法。 旨在在方法执行时，捕获错误。 在js机制中，catch捕获到Exception时， 代码还会继续向下执行。所以此处的catch未作任何操作， 代码也会继续向下执行。 和抛给浏览器的错误其实时一致的：