const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

vue路由跳轉報錯Avoided redundant navigation to current location: “/xxxxxx“.
一、問題出現及其出現原因
二、問題解決
三、原理解析
四、this指向複習
一、問題出現及其出現原因
在使用this.$router.push進行路由的跳轉時，出現如下報錯：

問題出現原因：重複路由跳轉，比如說當前路由是商品詳情頁面/goodsDetail，但是點選按鈕進行this.$router.push操作，要跳轉的還是商品詳情頁面/goodsDetail。

二、問題解決
方式一：升級vue-router版本為3.0即可解決，專案目錄下執行命令：

npm i [email protected] -S
1
方式二：修改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
2
3
4
5
6
插入位置

三、原理解析
1.location
通過列印，可得知這個location就是一個儲存了當前要跳轉路徑的物件，列印結果如下：

2.call的使用
call()函式可以在呼叫函式的同時，來改變this的指向，常用於實現繼承。
第一個引數this，由於call處於原型物件內部，所以此處this指向的是當前VueRouter的例項物件。而originalPush指向的是VueRouter.prototype.push。旨在於呼叫當前VueRouter例項物件中的push方法。
第二個引數location，在方法呼叫時傳入獲取到的location。
附一張當初學習js時的筆記：

3.catch
鏈式呼叫catch方法。旨在在方法執行時，捕獲錯誤。在js機制中，catch捕獲到Exception時，程式碼還會繼續向下執行。所以此處的catch未作任何操作，程式碼也會繼續向下執行。列印捕獲到的err如下，和拋給瀏覽器的錯誤其實時一致的：

此報錯不會影響專案的執行，修改原型物件上的push函式中添加了一步操作，就是對丟擲的錯誤進行捕獲，但是捕獲到之後不做任何操作。不做任何操作也不會對重複跳轉的元件有任何的影響，也不會對要跳轉的元件進行重新渲染，因為他並不會執行重複跳轉的操作。

為了證明以上猜想，可以在要跳轉元件的created和mounted操作中進行簡單的輸出語句，然後瘋狂點選路由跳轉按鈕，輸出如下：

可以看到push執行了多次，而created只執行了一次，對於剛剛我的猜想，可以不必擔心。

四、this指向複習
1.一般情況下，誰呼叫了函式，this就指向誰。
2.普通函式就指向了window。
3.建構函式和原型物件裡面的this都是指向例項物件。
4.繫結事件的函式就是事件繫結的物件。
5.定時器的函式this指向的也是window。
6.立即執行函式指向的也是window。