解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location
點(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)文章希望大家以后多多支持腳本之家!
- vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
- vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄
- ant design vue導(dǎo)航菜單與路由配置操作
- 在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
- vue 導(dǎo)航菜單刷新?tīng)顟B(tài)不消失,顯示對(duì)應(yīng)的路由界面操作
- Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問(wèn)題
- Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作
相關(guā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-07Vue-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ò)程詳解
在一次項(xiàng)目腳手架升級(jí)的過(guò)程中,將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建,這篇文章主要介紹了在?Vite項(xiàng)目中,使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下2022-12-12vue 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生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題
這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07