[vuejs 踩坑实战系列] keep-alive 被 beforeRouteEnter 骗了

Posted 2021-05-01 大前端视野

原创不易，欢迎转发

现在大家基本都在单页应用里面使用了 keep-alive 来缓存不活动的组件实例，而不是销毁它们。

如果你还没有使用，可以看看官方的介绍

如果大家需要一些新手入门实战的文章可以留言哈

1、用法很简单：主要是包裹

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

2、使用场景：单页配合

和 单页应用 环境配合使用的：

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

---

有以下几个常识，如果你还没有使用 keep-alive 的话，可以记下来：

1、组件内的第一次的生命周期：

mounted ==> activated

2、切换路由再次进来只会触发 activated

3、可以通过 router 的钩子函数 beforeRouteEnter 来做一些辅助判断：

不能获取组件实例  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 的触发）