beforeRouteEnter 異步獲取數據給實例問題

場景: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地址