vue 中 beforeRouteEnter 死循環(huán)的問題
如果在 vue 組件的 beforeRouteEnter 鉤子函數(shù)中調(diào)用 API 請(qǐng)求，會(huì)出現(xiàn)循環(huán)執(zhí)行的問題：
beforeRouteEnter(to, from, next) {
login().then(() => {
next({ name: 'home' });
}).catch(() => {
next();
});
},
上面的代碼會(huì)出現(xiàn)無限循環(huán)調(diào)用的問題，可能是API還沒有請(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àng)目的時(shí)候偶然遇到了一個(gè)問題，在進(jìn)入一個(gè)城市選擇頁面時(shí)，城市列表總是需要一秒后才能加載出來，出現(xiàn)了頁面抖動(dòng)，在解決這個(gè)問題時(shí)想到了路由中的beforeRouteEnter方法，在路由跳轉(zhuǎn)前加載數(shù)據(jù)，在網(wǎng)上發(fā)現(xiàn)有博客說可以使用如下寫法來解決這個(gè)問題：
這樣寫是毫無效果的， 經(jīng)過仔細(xì)分析官方文檔后發(fā)現(xiàn)next中的函數(shù)執(zhí)行在頁面mounted之后，所以這種方法時(shí)是不正確的。還不如直接將數(shù)據(jù)獲取綁定到create鉤子上。
正確寫法如下：
這樣就在跳轉(zhuǎn)前獲取到了數(shù)據(jù)，改寫后完全解決了頁面抖動(dòng)的問題。
總結(jié)
以上所述是小編給大家介紹的vue 中 beforeRouteEnter 死循環(huán)的問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了vue2.0路由配置問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼
這篇文章主要介紹了el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-03-03
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09