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

1、问题出现及其出现缘由

在使用this.$router.push进行路由的跳转时，出现以下报错：
javascript

问题出现缘由：重复路由跳转，好比说当前路由是商品详情页面/goodsDetail，可是点击按钮进行this.$router.push操做，要跳转的仍是商品详情页面/goodsDetail。vue

2、问题解决

方式一：升级vue-router版本为3.0便可解决，项目目录下运行命令：java

npm i vue-router@3.0 -S

方式二：修改VueRouter原型对象上的push方法，在router文件夹下的index.js中加入以下代码：web

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

插入位置
vue-router

3、原理解析

• 1.location
  经过打印，可得知这个location就是一个保存了当前要跳转路径的对象，打印结果以下：
  
• 2.call的使用

call()函数能够在调用函数的同时，来改变this的指向，经常使用于实现继承。
第一个参数this，因为call处于原型对象内部，因此此处this指向的是当前VueRouter的实例对象。而originalPush指向的是VueRouter.prototype.push。旨在于调用当前VueRouter实例对象中的push方法。
第二个参数location，在方法调用时传入获取到的location。
附一张当初学习js时的笔记：
npm

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

此报错不会影响项目的运行，修改原型对象上的push函数中添加了一步操做，就是对抛出的错误进行捕获，可是捕获到以后不作任何操做。不作任何操做也不会对重复跳转的组件有任何的影响，也不会对要跳转的组件进行从新渲染，由于他并不会执行重复跳转的操做。浏览器

为了证实以上猜测，能够在要跳转组件的created和mounted操做中进行简单的输出语句，而后疯狂点击路由跳转按钮，输出以下：

能够看到push执行了屡次，而created只执行了一次，对于刚刚个人猜测，能够没必要担忧。ide

4、this指向复习

• 1.通常状况下，谁调用了函数，this就指向谁。
• 2.普通函数就指向了window。
• 3.构造函数和原型对象里面的this都是指向实例对象。
• 4.绑定事件的函数就是事件绑定的对象。
• 5.定时器的函数this指向的也是window。
• 6.当即执行函数指向的也是window。