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

一、描述問題

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

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

二、報(bào)錯(cuò)原因

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

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

三、解決方法

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

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

npm i @vue-router2.8.0

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

缺點(diǎn)：每個(gè)路由跳轉(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 ：一個(gè)保存了當(dāng)前要跳轉(zhuǎn)路徑的對象；

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

兩個(gè)參數(shù)：

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

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

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

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

五、額外補(bǔ)充

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

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

2、Promise函數(shù)

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

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

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

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

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

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

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

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

?總結(jié)

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

最新評論