溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
場景: vue-router 路由鉤子 beforeRouteEnter 可以用來在初始進入頁面前，http 異步獲取數據 mockData ，預先判斷是進入 A 頁、還是 B 頁，還是留在本頁；而如果留在本頁的話，還需要在 mounted 根據 mockData 來判斷顯示哪種狀態（可以在本頁面實例創建后，重新發起 http 請求獲取 mockData ,但是沒有必要，造成代碼冗余）；
執行順序:
async beforeRouteEnter(to, from, next) {
let res = await gameData()
console.log('beforeRouteEnter start');
next(vm => {
console.log("vm start")
vm.is_exchange = res.is_exchange
vm.is_finish = res.is_finish
})
},
beforeCreate() {
console.log("beforeCreate start")
},
mounted(){
console.log('mounted start');
if(this.is_finish){
this.modalMsg="活動已結束"
return;
}
if(this.is_exchange){
this.modalMsg="您已兌換獎品"
return;
}
}
打印結果如下：
beforeRouteEnter start
beforeCreate start
mounted start
vm start
由打印結果，我們可以總結 beforeRouteEnter 鉤子確實在 vue 實例創建前執行，但是其 next 函數中 vm 回調不是同步執行，而是等到 mounted 執行完之后，才執行 。
癥結:因為我們要根據 mockData 中的 is_exchange 和 is_finish 參數來判斷決定頁面初始狀態，此過程需要在 mounted 中執行；但是 mounted 執行時， vm 還未執行，即 mounted 拿不到
is_exchange 和 is_finish 這兩個值，這樣就造成了沖突；
解決:在 next 中 打印 vm ，發現 vm 就是當前 vue 實例對象，即可以使用 vm 調用所有當前實例的變量和方法；那依次，能否將判斷邏輯寫入 methods 中一個方法中，使用 vm 來調用呢？
async beforeRouteEnter(to, from, next) {
let res = await gameData()
console.log('beforeRouteEnter start');
next(vm => {
console.log("vm start")
vm.is_exchange = res.is_exchange
vm.is_finish = res.is_finish
vm.judge();//賦值之后，此處調用判斷方法
})
},
beforeCreate() {
console.log("beforeCreate start")
},
mounted(){
console.log('mounted start');
},
methods:{
judge(){// 將判斷邏輯寫入judge方法
if(this.is_finish){
this.modalMsg="活動已結束"
return;
}
if(this.is_exchange){
this.modalMsg="您已兌換獎品"
return;
}
}
}
至此，問題解決。有同學可能會問，在 vm 中調用 judge 方法時， mounted 已執行，此時頁面已渲染，再去判斷初始狀態，會不會有閃爍問題？本人經過測試，發現不會，據此推斷，在 mounted 執行結束之后，頁面沒有開始更新動作，而是在執行完 vm 回調之后，再去渲染。這樣的話，邏輯上就行得通了，但是這個只是推斷，還需要在源碼層面找到依據才可以。
github地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
