共计 1081 个字符，预计需要花费 3 分钟才能阅读完成。
大家中秋假期快乐，假期分享一些实战文章给大家，原创不易，欢迎转发，一起学习
现在大家基本都在单页应用里面使用了 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 的话，可以记下来：
1、组件内的第一次的生命周期：
mounted ==> activated
2、切换路由再次进来只会触发 activated
3、可以通过 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 的触发）