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表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue 配合eiement動態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權(quán)限驗(yàn)證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了vue2.0路由配置問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
el-table 動態(tài)給每行增加class屬性的示例代碼
這篇文章主要介紹了el-table 動態(tài)給每行增加class屬性的示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-03-03
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09