欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location

 更新時(shí)間:2023年01月30日 16:48:02   作者:離奇6厘米  
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下

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

一、描述問(wèn)題

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

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

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

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

而Promise的回調(diào)函數(shù)resolve和reject,必須傳其中一個(gè),否則會(huì)報(bào)錯(cuò)。如果路由地址跳轉(zhuǎn)相同,且沒(méi)有捕獲到錯(cuò)誤,控制臺(tái)始終會(huì)出現(xiàn)上圖所出現(xiàn)的問(wè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原型對(duì)象上的push/replace方法

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

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

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

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

// 修改原型對(duì)象中的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)路徑的對(duì)象;

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

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

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

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

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

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

五、額外補(bǔ)充

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

聲明式編程式
<router-link :to="...">$router.push(...)

編程式導(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í)例對(duì)象代表一個(gè)異步操作

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

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

③ .then()方法用來(lái)預(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • npm?install安裝報(bào)錯(cuò)的幾種常見(jiàn)情況

    npm?install安裝報(bào)錯(cuò)的幾種常見(jiàn)情況

    當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴(lài)npm install,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報(bào)錯(cuò)的幾種常見(jiàn)情況,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • vue+ts大文件切片上傳的實(shí)現(xiàn)示例

    vue+ts大文件切片上傳的實(shí)現(xiàn)示例

    在Vue項(xiàng)目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個(gè)非常常見(jiàn)的需求,本文主要介紹了vue+ts大文件切片上傳,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-01-01
  • Vue開(kāi)發(fā)之封裝上傳文件組件與用法示例

    Vue開(kāi)發(fā)之封裝上傳文件組件與用法示例

    這篇文章主要介紹了Vue開(kāi)發(fā)之封裝上傳文件組件與用法,結(jié)合實(shí)例形式分析了vue.js使用elementui的 el-upload插件進(jìn)行上傳文件組件的封裝及使用相關(guān)操作技巧,需要的朋友可以參考下
    2019-04-04
  • 從組件封裝看Vue的作用域插槽的實(shí)現(xiàn)

    從組件封裝看Vue的作用域插槽的實(shí)現(xiàn)

    這篇文章主要介紹了從組件封裝看Vue的作用域插槽的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • Vue-router編程式導(dǎo)航的兩種實(shí)現(xiàn)代碼

    Vue-router編程式導(dǎo)航的兩種實(shí)現(xiàn)代碼

    這篇文章主要介紹了Vue-router編程式導(dǎo)航的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-03-03
  • 在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過(guò)程詳解

    在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過(guò)程詳解

    在一次項(xiàng)目腳手架升級(jí)的過(guò)程中,將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建,這篇文章主要介紹了在?Vite項(xiàng)目中,使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下
    2022-12-12
  • 詳解vue幾種主動(dòng)刷新的方法總結(jié)

    詳解vue幾種主動(dòng)刷新的方法總結(jié)

    這篇文章主要介紹了詳解vue幾種主動(dòng)刷新的方法總結(jié),文中詳細(xì)的介紹了幾種方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法

    vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法

    vue項(xiàng)目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個(gè)問(wèn)題遍歷的字段可以修改值但是確定的幾個(gè)字段無(wú)法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法,感興趣的朋友一起看看吧
    2023-12-12
  • Vue vm.$attrs使用場(chǎng)景詳解

    Vue vm.$attrs使用場(chǎng)景詳解

    這篇文章主要介紹了vm.$attrs使用場(chǎng)景詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • 解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題

    解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題

    這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07

最新評(píng)論