Vue router / element 項目重復點擊路由報錯

在做 vue + element-ui 項目時，重復點擊導航路由報錯，報錯信息如下：

雖然不影響使用，但問題還是要解決的。於是，查文檔，注意到 vue-router 文檔中有這樣一段話，傳送門→

即：vue-router@3.1.0 以后，回調函數返回的是 promise。所以如果沒有捕獲到錯誤，就沒有回調函數，這時錯誤信息就會交給全局的路由錯誤處理，因此控制台始終會出現如上圖的錯誤。提示錯誤的源碼如下：

so ... ....

第一種解決辦法：降低vue-router的版本在@3.1.0以下

npm i vue-router@3.0 --S

第二種方法：在router.push的時候捕獲異常

this.$router.push(path)
    .catch(err=> err)

這個方法雖然會多寫幾句代碼，但相比第一種方法不會受到固定版本的限制。

第三種方法：禁止全局的路由錯誤處理，在 router/index.js 添加如下代碼：

// router/index.js 文件
​
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
    return originalPush.call(this, location).catch(err => err)
} 
​
// 如果路由是router.place的，方法同理

綜上還是推薦使用第三種方法的，如果這個方法還是不能解決問題，只能方法二或固定版本在3.1.0以下了。