詳解vue beforeRouteEnter 異步獲取數(shù)據(jù)給實(shí)例問題

場(chǎng)景: vue-router 路由鉤子 beforeRouteEnter 可以用來在初始進(jìn)入頁面前，http 異步獲取數(shù)據(jù) mockData ，預(yù)先判斷是進(jìn)入 A 頁、還是 B 頁，還是留在本頁；而如果留在本頁的話，還需要在 mounted 根據(jù) mockData 來判斷顯示哪種狀態(tài)（可以在本頁面實(shí)例創(chuàng)建后，重新發(fā)起 http 請(qǐng)求獲取 mockData ,但是沒有必要，造成代碼冗余）；

執(zhí)行順序:

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="活動(dòng)已結(jié)束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兌換獎(jiǎng)品"
   return;
  }
 }

打印結(jié)果如下：

beforeRouteEnter start

beforeCreate start

mounted start

vm start

由打印結(jié)果，我們可以總結(jié) beforeRouteEnter 鉤子確實(shí)在 vue 實(shí)例創(chuàng)建前執(zhí)行，但是其 next 函數(shù)中 vm 回調(diào)不是同步執(zhí)行，而是等到 mounted 執(zhí)行完之后，才執(zhí)行 。

癥結(jié):因?yàn)槲覀円鶕?jù) mockData 中的 is_exchange 和 is_finish 參數(shù)來判斷決定頁面初始狀態(tài)，此過程需要在 mounted 中執(zhí)行；但是 mounted 執(zhí)行時(shí)， vm 還未執(zhí)行，即 mounted 拿不到

is_exchange 和 is_finish 這兩個(gè)值，這樣就造成了沖突；

解決:在 next 中 打印 vm ，發(fā)現(xiàn) vm 就是當(dāng)前 vue 實(shí)例對(duì)象，即可以使用 vm 調(diào)用所有當(dāng)前實(shí)例的變量和方法；那依次，能否將判斷邏輯寫入 methods 中一個(gè)方法中，使用 vm 來調(diào)用呢？

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();//賦值之后，此處調(diào)用判斷方法
   })
 },
 beforeCreate() {
  console.log("beforeCreate start")
 },
 mounted(){
  console.log('mounted start');
 },
 methods:{
  judge(){// 將判斷邏輯寫入judge方法
  if(this.is_finish){
   this.modalMsg="活動(dòng)已結(jié)束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兌換獎(jiǎng)品"
   return;
  }
  }
 }

至此，問題解決。有同學(xué)可能會(huì)問，在 vm 中調(diào)用 judge 方法時(shí)， mounted 已執(zhí)行，此時(shí)頁面已渲染，再去判斷初始狀態(tài)，會(huì)不會(huì)有閃爍問題？本人經(jīng)過測(cè)試，發(fā)現(xiàn)不會(huì)，據(jù)此推斷，在 mounted 執(zhí)行結(jié)束之后，頁面沒有開始更新動(dòng)作，而是在執(zhí)行完 vm 回調(diào)之后，再去渲染。這樣的話，邏輯上就行得通了，但是這個(gè)只是推斷，還需要在源碼層面找到依據(jù)才可以。

github地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。