vue路由跳轉報錯Avoided redundant navigation to current location: “/xxxxxx“.
一、原因
- 在使用
this.$router.push進行路由的跳轉時，出現如下報錯：
image - 原因：重復路由跳轉，
比如說當前路由是商品詳情頁面/detail，
但是點擊按鈕進行this.$router.push操作，
要跳轉的還是詳情頁面/detail。
二、解決報錯
- 升級vue-router版本為3.0即可解決，項目目錄下運行命令：
- 修改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
三、原理
原理解析
-
location這個location
就是一個保存了當前要跳轉路徑的對象；
-
call的使用call()函數可以在調用函數的同時，
來改變this的指向，常用于實現繼承。
第一個參數this，
由于call處于原型對象內部，
所以此處this指向的是當前VueRouter的實例對象。
而originalPush指向的是
VueRouter.prototype.push。
旨在于調用當前VueRouter實例對象中的push方法。
第二個參數location，
在方法調用時傳入獲取到的location。
- catch
鏈式調用catch方法。
旨在在方法執行時，捕獲錯誤。
在js機制中，catch捕獲到Exception時，
代碼還會繼續向下執行。所以此處的catch未作任何操作，
代碼也會繼續向下執行。
和拋給瀏覽器的錯誤其實時一致的：
