keep-Alive遇到的一个坑

在vue中，有时候我们需要缓存一个页面，这个时候会用到keep-Alive。
触发场景：
在引用同一个子组件得两个页面，且该子组件会使用到dom元素得时候。
例如子组件

<template><div class="yd-dialog-black-mask" v-show="showMask"><div class="layer-wraper"><div class="picture"><img src="../../../static/img/photo.png" alt></div><div class="content"><h1>{{staffNo}}</h1><canvas id="qrcode"></canvas><span class="desc">扫我就是我的人~</span></div><div class="btn-wraper"><div class="close-icon" @click.stop="close()"></div></div></div></div>
</template>
<script>
import QRCode from "qrcode";
import { mapState } from "vuex";
export default {props: {showMask: Boolean},data() {return {staffNo: ""};},computed: {...mapState({quickMark: state => state.user.quickMark})},methods: {close() {this.$emit("on-close");}},created() {this.staffNo = localStorage.getItem("staffNo");},mounted() {let self = this;this.$nextTick(() => {QRCode.toCanvas(document.querySelector("#qrcode"),this.quickMark,function(err) {if (err) {self.toast("生成二维码异常，请稍后再试");}});});}
};
</script><style lang="less" scoped>
.yd-dialog-black-mask {top: 0 !important;bottom: 0 !important;justify-content: center !important;align-items: center;.layer-wraper {position: relative;.picture {position: absolute;text-align: center;width: 100%;.p2r(top, -120);img {.p2r(width, 312);}}.content {text-align: center;box-sizing: border-box;.p2r(padding-top, 120);.p2r(width, 530);.p2r(height, 618);border-radius: 10px;background: #fff;h1 {.p2r(font-size, 36);.p2r(line-height, 40);font-weight: bold;}#qrcode {.p2r(margin-top, 14);.p2r(width, 350) !important;.p2r(height, 350) !important;}.desc {display: block;.p2r(margin-top, 16);.p2r(font-size, 30);}}.btn-wraper {.close-icon {.p2r(width, 70);.p2r(height, 70);margin: auto;.p2r(margin-top, 44);background: url("../../img/icon-close.png") no-repeat center center;background-size: 100%;}}}
}
</style>

解决方法如上所示就是用nextTick来解决。。不使用nextTick来解决。。不使用nextTick来解决。。不使用nextTick得时候在从keep-Alive得组件切换到另一个组件时，dom元素未被销魂，导致子组件document.querySelector("#qrcode"),选中得时keep-alive得组件而非新得路由组件得dom。导致新路由页面得二维码未生成。

keep-Alive遇到的一个坑相关推荐

困扰多日的C#调用Haskell问题竟然是Windows的一个坑
最近一直被C#调用Haskell时的"尝试读取或写入受保护的内存"问题所困扰(详见C#调用haskell遭遇Attempted to read or write protected ...
SAP WM LT10事务代码的一个坑？
SAP WM LT10事务代码的一个坑? 执行事务代码LT10,试图将storage type SAM下物料库存的几个SU转入同一个货架上.Storage type SAM有启用SUM功能的. 执行, ...
mysql div 没有小数,mysql order by limit 的一个坑
mysql order by limit 的一个坑分页查询的时候遇到的坑: 发现的问题: 对单个无索引的字段进行排序后limit .发现当被排序字段有相同值时并且在limit范围内,取的值并不是正常 ...
移动端开发碰到一个坑
移动端开发真是不断踩坑,今天在做一个移动端的组件,又发现了一个坑,记录到日志里面,做个记录,以便以后再遇到这个问题有个记录可以参考. 在ios中的chrome浏览器中,手指从屏幕上方移动出屏幕(一定要 ...
centos 升级mysql_CentOS 7下升级MySQL5.7.23的一个坑
发现CentOS 7下升级MySQL5.7.23的一个坑,以前面升级到MySQL 5.7.23的一个集群为例在我们环境下打开文件描述符个数的参数open_files_limit在MySQL 5.6. ...
0705 - 说说 NSPopover 的一个坑
今天开发 iTips,遇到一个很诡异的问题:NSOutlineView 中的 NSTableCellView 中的 NSTextField,始终有一个背景色,无论怎么设置都无法去掉.如下图中左侧部分所 ...
nodejs request module里的json参数的一个坑
今天工作的时候遇到一个坑,在客户端用nodejs给服务器发送HTTP请求,服务器老是报错:In the context of Data Services an unknown internal ser ...
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...
centos mysql 升级 5.7_CentOS 7下升级MySQL5.7.23的一个坑
发现CentOS 7下升级MySQL5.7.23的一个坑,以前面升级到MySQL 5.7.23的一个集群为例在我们环境下打开文件描述符个数的参数open_files_limit在MySQL 5.6. ...
mongodb count 导致不正确的数量（mongodb count 一个坑）
在mongodb 集群中,if 存在orphaned documents 和chunk migration, count查询可能会导致一个不正确的查询结果,例如我就是踩的这个坑,先不说话,看结果: ...

keep-Alive遇到的一个坑

keep-Alive遇到的一个坑相关推荐

最新文章

热门文章