keep-alive 被 beforeRouteEnter 騙了

<p>你們中秋假期快樂，假期分享一些實戰文章給你們，<code>原創不易，歡迎轉發，一塊兒學習</code></p> <hr> <p>如今你們基本都在<code>單頁應用</code>裏面使用了 <code>keep-alive</code> 來<code>緩存不活動的組件實例，而不是銷燬它們</code>。</p> <p>若是你尚未使用，能夠看看官方的介紹（若是你們須要一些新手入門的文章能夠留言哈）：<a href="https://cn.vuejs.org/v2/api/#keep-alive" rel="nofollow noreferrer">https://cn.vuejs.org/v2/api/#...</a></p> <p>用法很簡單：主要是<code>包裹</code></p>

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

<p>使用場景：</p> <blockquote>和<code>單頁應用</code>環境配合使用的：</blockquote>

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

<hr> <p>有如下幾個<code>常識</code>，若是你尚未使用 keep-alive 的話，能夠記下來：</p> <p>一、組件內的第一次的<code>生命週期</code>：</p> <blockquote>mounted ==&gt; activated</blockquote> <p>二、切換路由再次進來只會觸發 <code>activated</code></p> <p>三、能夠經過 router 的鉤子函數 <code>beforeRouteEnter</code> 來作一些輔助判斷</p> <p>具體能夠看看官方的這個的文檔：<a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB" rel="nofollow noreferrer">https://router.vuejs.org/zh/g...</a></p> <blockquote>不能獲取組件實例 <code>this</code> </blockquote> <p>好比你要設置 data 裏面的變量，抱歉，這裏操做不了，<code>那如何作呢？</code></p> <p>不少熟悉的人會想到 <code>next</code> 操做 <code>vm 對象</code>：</p>

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

<p>是的，這裏你能夠經過 <code>from.name</code> 來作一些判斷，好比以下代碼片斷：</p> <blockquote>需求很簡單，判斷一下從<code>特定路由</code>切換過來，作一個判斷賦值給 data 的 isFromTester</blockquote>

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

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

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

<p>大功告成啦</p> <blockquote>抱歉，這裏的 activated 不會那麼及時地更新 isFromTester，因此<code>第一次你獲取的不是 true</code>，第二次是能夠的</blockquote> <p>那咱們就要來刨根問底了，到底爲啥不是及時更新的呢？</p> <p>有沒有人想到了 vue 裏面一個很常見的 <code>nextTick</code> 這個東西？</p> <p>是滴，就是它，它騙了 activated，真相在這裏：（咱們省去了不少路由事件裏面本身的處理邏輯和 vue activated 的 hook 的觸發）</p>

來源：http://www.javashuo.com/article/p-khgtgrtt-kq.html