如果页面组件中含有iframe元素则在tab切换时dom结构会改变

[hellolex]

Bug 描述

今天在使用中发现，如果页面组件中使用了iframe元素，在tab标签页切换时会丢失iframe中的内容
具体例子为使用了一个包装的第三方富文本编辑器，该编辑器是使用iframe完成功能的，在页面切换时发现在编辑器中写好的内容丢失了，查看页面元素发现是切换的时候iframe里面的内容发生了变化

预期行为

页面组件在各种路由切换时应保持原先的数据和结构

截图

开发环境（请填写以下信息）

• Node.js: 14.15.0
• Vue: 2.6.11
• Vue Router: 3.5.1
• Vue Router Tab: 1.2.7

运行环境（请填写以下信息）

• 设备: PC
• 操作系统: Windows 10
• 浏览器和版本: 93.0.4577.82（正式版本） （64 位）

[hellolex]

还发现如果是在默认页组件里使用的话，则切换tab后再切回来还是能保持

[bhuh12]

富文本数据是否 v-model 双向绑定？
如果已绑定存在该问题，可尝试 activated 通过 v-if 控制富文本组件重新创建

<rich-text v-model="value" v-if="show" />

async activated(){
  this.show = false
  await this.$nextTick()
  this.show = true
}

问题发生的根因是，iframe 脱离 document 后重新插入，子页面内容会重新加载。
RouterTab 是基于 KeepAlive 实现的，页面内部的 iframe 在切换页签后，实际 iframe 节点会重新加载。
如果富文本控件是你们自己封装的，可以内部处理一下。

[bhuh12]

你看看能保持的页签和未保持的页签，是否都配置了缓存页签

[hellolex]

富文本数据是否 v-model 双向绑定？ 如果已绑定存在该问题，可尝试 activated 通过 v-if 控制富文本组件重新创建

<rich-text v-model="value" v-if="show" />

async activated(){
  this.show = false
  await this.$nextTick()
  this.show = true
}

问题发生的根因是，iframe 脱离 document 后重新插入，子页面内容会重新加载。 RouterTab 是基于 KeepAlive 实现的，页面内部的 iframe 在切换页签后，实际 iframe 节点会重新加载。 如果富文本控件是你们自己封装的，可以内部处理一下。

编辑器是双向绑定的，看来只能内部重建一下了