vue 中 beforeRouteEnter 死循環(huán)的問(wèn)題
如果在 vue 組件的 beforeRouteEnter 鉤子函數(shù)中調(diào)用 API 請(qǐng)求，會(huì)出現(xiàn)循環(huán)執(zhí)行的問(wèn)題：
beforeRouteEnter(to, from, next) {
login().then(() => {
next({ name: 'home' });
}).catch(() => {
next();
});
},
上面的代碼會(huì)出現(xiàn)無(wú)限循環(huán)調(diào)用的問(wèn)題，可能是API還沒(méi)有請(qǐng)求完成，又一次進(jìn)入 router，調(diào)用了 beforRouterEnter 的原因，解決辦法加一個(gè)變量，在調(diào)用API之前判斷一下：
let request = false;
beforeRouteEnter(to, from, next) {
if (request) {
next();
return;
}
request = true;
login().then(() => {
next({ name: 'home' });
});
},
ps：關(guān)于vue中beforeRouteEnter使用的誤區(qū)
在寫(xiě)項(xiàng)目的時(shí)候偶然遇到了一個(gè)問(wèn)題，在進(jìn)入一個(gè)城市選擇頁(yè)面時(shí)，城市列表總是需要一秒后才能加載出來(lái)，出現(xiàn)了頁(yè)面抖動(dòng)，在解決這個(gè)問(wèn)題時(shí)想到了路由中的beforeRouteEnter方法，在路由跳轉(zhuǎn)前加載數(shù)據(jù)，在網(wǎng)上發(fā)現(xiàn)有博客說(shuō)可以使用如下寫(xiě)法來(lái)解決這個(gè)問(wèn)題：
這樣寫(xiě)是毫無(wú)效果的， 經(jīng)過(guò)仔細(xì)分析官方文檔后發(fā)現(xiàn)next中的函數(shù)執(zhí)行在頁(yè)面mounted之后，所以這種方法時(shí)是不正確的。還不如直接將數(shù)據(jù)獲取綁定到create鉤子上。
正確寫(xiě)法如下：
這樣就在跳轉(zhuǎn)前獲取到了數(shù)據(jù)，改寫(xiě)后完全解決了頁(yè)面抖動(dòng)的問(wèn)題。
總結(jié)
以上所述是小編給大家介紹的vue 中 beforeRouteEnter 死循環(huán)的問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼
這篇文章主要介紹了vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼，實(shí)現(xiàn)了登陸攔截，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vuex 如何動(dòng)態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動(dòng)態(tài)引入 store modules，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue使用Sass時(shí)報(bào)錯(cuò)問(wèn)題的解決方法
這篇文章主要介紹了vue使用Sass時(shí)報(bào)錯(cuò)問(wèn)題的解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯(cuò)誤問(wèn)題分析及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
vue如何解決echarts5.0以上版本插入地圖的問(wèn)題
這篇文章主要介紹了vue如何解決echarts5.0以上版本插入地圖的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決
這篇文章主要介紹了在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Store倉(cāng)庫(kù)里，state就是用來(lái)存放數(shù)據(jù)。如果很多組件都使用這個(gè)過(guò)濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來(lái)共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權(quán)限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解
文件上傳是我們?cè)陂_(kāi)發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來(lái)實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11