[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 的触发）