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