一、問題出現及其出現原因
在使用this.$router.push進行路由的跳轉時，出現如下報錯：
問題出現原因：
重復路由跳轉，比如說當前路由是商品詳情頁面/goodsDetail，但是點擊按鈕進行this.$router.push操作，要跳轉的還是商品詳情頁面/goodsDetail。
二、問題解決
方式一：升級vue-router版本為3.0即可解決，項目目錄下運行命令：
npm i vue-router@3.0 -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.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。