大家中秋假期快乐,假期分享一些实战文章给大家,原创不易,欢迎转发,一起学习


现在大家基本都在单页应用里面使用了 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 的触发)

来源:https://segmentfault.com/a/1190000016493658

keep-alive 被 beforeRouteEnter 骗了的更多相关文章

  1. SQL Server 2012故障转移的looksalive check和is alive check

    什么是looksalive check和is alive check SQL Server故障转移集群是建立在windows集群服务上的一种热备的高可用方案.在集群运行过程中,windows集群服务定 ...

  2. Keeping Async Methods Alive

    Consider a type that will print out a message when it’s finalized, and that has a Dispose method whi ...

  3. 转载:有关SQL server connection Keep Alive 的FAQ(3)

    转载:http://blogs.msdn.com/b/apgcdsd/archive/2012/06/07/sql-server-connection-keep-alive-faq-3.aspx 这个 ...

  4. 转载:有关SQL server connection Keep Alive 的FAQ(2)

    转: http://blogs.msdn.com/b/apgcdsd/archive/2012/05/18/sql-server-connection-keep-alive-faq-2.aspx 在下 ...

  5. BZOJ-2049 Cave洞穴勘测 动态树Link-Cut-Tree (并查集骗分TAT)

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 5833 Solved: 2666 [Submit] ...

  6. Keep Alive

    跳板机时经常出现连接被断开的情况.如果发生这种情况,请在客户端配置Keep Alive设置,具体方法参考如下: Windows: secureCRT:Properties -> Terminal ...

  7. 51Nod 算法马拉松15 记一次悲壮而又开心的骗分比赛

    OwO 故事的起源大概是zcg前天发现51Nod晚上有场马拉松,然后他就很开心的过去打了 神奇的故事就开始了: 晚上的时候我当时貌似正在写线段树?然后看见zcg一脸激动告诉我第一题有九个点直接输出B就 ...

  8. How to Keep Alive SSH Sessions

    How to Keep Alive SSH Sessions Many NAT firewalls time out idle sessions after a certain period of t ...

  9. keep alive的相关介绍

        无论Windows还是linux,Keepalive就三个配置参数.下文以linux环境为介绍. Technorati 标签: keepalive     tcp_sock结构体中有三个有关的 ...

随机推荐

  1. MySQL集群安装与配置

    MySQL集群安装与配置   文章目录 [隐藏] 一.mysql集群安装 二.节点配置 三.首次启动节点 四.测试服务是否正常 五.安全关闭和重启 MySQL Cluster 是 MySQL 适合于分 ...

  2. postman-鉴权

    概念 Cookie和鉴权的区别,cookie一般指缓存在本地的数据:鉴权一般指验证用户是否拥有访问系统的权利 鉴权分类 Basic auth:基础鉴权,数据没有加密可明文显示,一般在测试环境使用,不在 ...

  3. linux运维、架构之路-全网备份项目方案

    一.项目需求说明 某公司有多台服务器,里面的数据很重要,如果磁盘坏了,数据就会丢失,所以公司要求把重要服务器数据备份以便出现问题时可以进行恢复,要求:每天晚上00点整在所有服务器上打包备份系统配置文件 ...

  4. luogu 2698 [USACO12MAR]花盆Flowerpot 单调队列

    刷水~ Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in&quo ...

  5. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  6. BZOJ 3329: Xorequ(数位dp+递推)

    传送门 解题思路 可以把原式移项得\(x\)^\(2x\)=\(3x\),而\(x+2x=3x\),说明\(x\)二进制下不能有两个连续的\(1\).那么第一问就是一个简单的数位\(dp\),第二问考 ...

  7. CG-CTF | 综合题2

    查源码发现一个文件读取:http://cms.nuptzj.cn/about.php?file=sm.txt,用它把能找到的php都读取下来 <?php if (!isset($_COOKIE[ ...

  8. 小程序app.js小结

    小程序app.js app.js import { ApiUrl } from 'utils/apiurl.js'; import { httpReq } from 'utils/http.js'; ...

  9. BBED ORA-00600: internal error code, arguments: [16703], [1403], [20], [], [], [], [], [], [], [], [], []

    BBED模拟并修复 删除:$ORACLE_HOME/rdbms/admin/prvtsupp.plb SQL> alter database open;alter database open*E ...

  10. UVA 1380 A Scheduling Problem

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...