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
未作任何操作,
代碼也會繼續向下執行。
和拋給瀏覽器的錯誤其實時一致的: