點(diǎn)擊vue路由跳轉(zhuǎn)，控制臺報錯：Avoided redundant navigation to current location: “/xxxxxx“解決方法

一、描述問題

在使用this.$router.push跳轉(zhuǎn)頁面時候，重復(fù)點(diǎn)擊菜單引起路由重復(fù)報錯

比如當(dāng)前頁面顯示區(qū)是路由組件‘/cats’，重復(fù)點(diǎn)擊按鈕進(jìn)行this.$router.push跳轉(zhuǎn)，要跳轉(zhuǎn)的組件仍然是‘/cats’，那么控制就會報如下錯誤：

二、報錯原因

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

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

三、解決方法

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

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

npm i @vue-router2.8.0

2、為每一個Promise添加一個回調(diào)函數(shù)

缺點(diǎn)：每個路由跳轉(zhuǎn)都要添加回調(diào)函數(shù)

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

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

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

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

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

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

// 修改原型對象中的replace函數(shù)
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 ：一個保存了當(dāng)前要跳轉(zhuǎn)路徑的對象；

call()函數(shù)：可以在調(diào)用函數(shù)的同時改變this的指向，常用于實(shí)現(xiàn)繼承,

兩個參數(shù)：

this：由于call處于原型對象內(nèi)部，所以此處this指向的是當(dāng)前VueRouter的實(shí)例對象；而originalPush指向的是VueRouter.prototype.push，旨在于調(diào)用當(dāng)前VueRouter實(shí)例對象中的push方法；

location：在方法調(diào)用時傳入獲取到的location。

catch：鏈?zhǔn)秸{(diào)用catch方法，目的是在方法執(zhí)行時，捕獲錯誤。

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

五、額外補(bǔ)充

1、路由導(dǎo)航方式

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

2、Promise函數(shù)

① Promise是一個構(gòu)造函數(shù)

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

每一個Promise實(shí)例對象代表一個異步操作

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

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

③ .then()方法用來預(yù)先指定成功或失敗的回調(diào)函數(shù)

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

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

?總結(jié)

到此這篇關(guān)于解決Vue路由導(dǎo)航報錯:NavigationDuplicated: Avoided redundant navigation to current location的文章就介紹到這了,更多相關(guān)Vue路由導(dǎo)航報錯NavigationDuplicated內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論