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

執(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ù)來(lái)判斷決定頁(yè)面初始狀態(tài)，此過(guò)程需要在 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í)例的變量和方法；那依次，能否將判斷邏輯寫(xiě)入 methods 中一個(gè)方法中，使用 vm 來(lái)調(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(){// 將判斷邏輯寫(xiě)入judge方法
  if(this.is_finish){
   this.modalMsg="活動(dòng)已結(jié)束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兌換獎(jiǎng)品"
   return;
  }
  }
 }

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

github地址

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

最新評(píng)論