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