[vuejs 踩坑實戰系列] keep-alive 被 beforeRouteEnter 騙了

你們中秋假期快樂，假期分享一些實戰文章給你們，原創不易，歡迎轉發，一塊兒學習

---

如今你們基本都在單頁應用裏面使用了 keep-alive 來緩存不活動的組件實例，而不是銷燬它們。

若是你尚未使用，能夠看看官方的介紹（若是你們須要一些新手入門的文章能夠留言哈）：https://cn.vuejs.org/v2/api/#...

用法很簡單：主要是包裹

<keep-alive>
  ...
</keep-alive>

使用場景：

和 單頁應用環境配合使用的：

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

---

有如下幾個常識，若是你尚未使用 keep-alive 的話，能夠記下來：

一、組件內的第一次的生命週期：

mounted ==> activated

二、切換路由再次進來只會觸發 activated

三、能夠經過 router 的鉤子函數 beforeRouteEnter 來作一些輔助判斷

具體能夠看看官方的這個的文檔：https://router.vuejs.org/zh/g...

不能獲取組件實例 this

好比你要設置 data 裏面的變量，抱歉，這裏操做不了，那如何作呢？

不少熟悉的人會想到 next 操做 vm 對象：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 經過 `vm` 訪問組件實例
  })
}

是的，這裏你能夠經過 from.name 來作一些判斷，好比以下代碼片斷：

需求很簡單，判斷一下從 特定路由切換過來，作一個判斷賦值給 data 的 isFromTester

beforeRouteEnter (to, from, next) {
  console.log(to, from);
  if (from.name == 'Tester') {
    next(vm => {
      vm.isFromTester = true
    })
  } else {
    next(vm => {
      vm.isFromTester = false
    })
  }
}

而後你就能夠在 activated 生命週期直接判斷啦

activated () {
  if (this.isFromTester) {
    //...
  }
}

大功告成啦

抱歉，這裏的 activated 不會那麼及時地更新 isFromTester，因此 第一次你獲取的不是 true，第二次是能夠的

那咱們就要來刨根問底了，到底爲啥不是及時更新的呢？

有沒有人想到了 vue 裏面一個很常見的 nextTick 這個東西？

是滴，就是它，它騙了 activated，真相在這裏：（咱們省去了不少路由事件裏面本身的處理邏輯和 vue activated 的 hook 的觸發）