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

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

一、原因

• 在使用this.$router.push进行路由的跳转时，出现如下报错：
  
  image
• 原因：重复路由跳转，
  比如说当前路由是商品详情页面/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)
}

image

三、原理

原理解析

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