Vue路由導航報錯Avoided?redundant?navigation?to?current?location如何解決

本篇內容主要講解“Vue路由導航報錯Avoided redundant navigation to current location如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue路由導航報錯Avoided redundant navigation to current location如何解決”吧!

一、描述問題

在使用this.$router.push跳轉頁面時候，重復點擊菜單引起路由重復報錯

比如當前頁面顯示區是路由組件‘/cats’，重復點擊按鈕進行this.$router.push跳轉，要跳轉的組件仍然是‘/cats’，那么控制就會報如下錯誤：

二、報錯原因

由于 vue-router3.0 及以上版本回調形式改成Promise API的形式了，返回的是一個Promise 。也是說 push和replace都是Promise類型了。

而Promise的回調函數resolve和reject，必須傳其中一個，否則會報錯。如果路由地址跳轉相同，且沒有捕獲到錯誤，控制臺始終會出現上圖所出現的問題。

三、解決方法

1、安裝vue-router3.0以下版本

先卸載3.0以上版本然后再安裝舊版本

npm i @vue-router2.8.0

2、為每一個Promise添加一個回調函數

缺點：每個路由跳轉都要添加回調函數

this.$router.push({
   name: 'Cats',
 }, () => {})

3、修改VueRouter原型對象上的push/replace方法

在router/index.js文件中添加如下代碼

// 獲取原型對象push函數
const originalPush = VueRouter.prototype.push

// 獲取原型對象replace函數
const originalReplace = VueRouter.prototype.replace

// 修改原型對象中的push函數
VueRouter.prototype.push = function push(location){
return originalPush.call(this , location).catch(err=>err)
}

// 修改原型對象中的replace函數
VueRouter.prototype.replace = function replace(location){
return originalReplace.call(this , location).catch(err=>err)
}

四、原理分析

const originalReplace = VueRouter.prototype.replace

VueRouter.prototype.replace = function replace(location){
return originalReplace.call(this , location).catch(err=>err)
}

location ：一個保存了當前要跳轉路徑的對象；

call()函數：可以在調用函數的同時改變this的指向，常用于實現繼承,

兩個參數：

this：由于call處于原型對象內部，所以此處this指向的是當前VueRouter的實例對象；而originalPush指向的是VueRouter.prototype.push，旨在于調用當前VueRouter實例對象中的push方法；

location：在方法調用時傳入獲取到的location。

catch：鏈式調用catch方法，目的是在方法執行時，捕獲錯誤。

在js機制中，catch捕獲到Exception時，代碼還會繼續向下執行。所以此處的catch未作任何操作，代碼也會繼續向下執行，和拋給瀏覽器的錯誤其實時一致的

五、額外補充

1、路由導航方式

編程式導航：即 $router.push、$router.replace、$router.forward()、$router.back()、$router.go()

2、Promise函數

① Promise是一個構造函數

可以使用new 創建一個Promise實例 //eg：const p = new Promise()

每一個Promise實例對象代表一個異步操作

② Promise.prototype上包含一個.then()方法

每一個new Promise()構造函數得到的實例對象都可以通過原型鏈的方式訪問到.then()方法 //eg：p.then()

③ .then()方法用來預先指定成功或失敗的回調函數

p.then(成功回調，失敗回調)

調用.then()方法時，成功的回調函數是必選的，失敗回調是可選的

到此，相信大家對“Vue路由導航報錯Avoided redundant navigation to current location如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！