vue路由跳轉報錯Avoided redundant navigation to current location: “/xxxxxx“

vue路由跳轉報錯Avoided redundant navigation to current location: “/xxxxxx“.

一、原因

  • 在使用this.$router.push進行路由的跳轉時,出現如下報錯:
    image
  • 原因:重復路由跳轉,
    比如說當前路由是商品詳情頁面/detail
    但是點擊按鈕進行this.$router.push操作,
    要跳轉的還是詳情頁面/detail

二、解決報錯

  1. 升級vue-router版本為3.0即可解決,項目目錄下運行命令:
  2. 修改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

三、原理

原理解析

  1. location 這個location
    就是一個保存了當前要跳轉路徑的對象;
  1. call的使用 call()函數可以在調用函數的同時,
    來改變this的指向,常用于實現繼承。
    第一個參數this
    由于call處于原型對象內部,
    所以此處this指向的是當前VueRouter的實例對象。
    originalPush指向的是
    VueRouter.prototype.push
    旨在于調用當前VueRouter實例對象中的push方法。
    第二個參數location
    在方法調用時傳入獲取到的location
  1. catch
    鏈式調用catch方法。
    旨在在方法執行時,捕獲錯誤。
    在js機制中,catch捕獲到Exception時,
    代碼還會繼續向下執行。所以此處的catch未作任何操作,
    代碼也會繼續向下執行。
    和拋給瀏覽器的錯誤其實時一致的:
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容