使用iframe嵌入页面时，src改变但是页面未刷新

问题：

使用iframe嵌入页面时，src改变但是页面未刷新

---

问题描述：

已知路由/test/123被iframe嵌入显示, 点击修改该iframe的src为/test/456, 但是页面仍是/test/123的内容，即页面未刷新。

---

问题代码如下：

 <div style="height: 100%">
    <iframe
      class="process-monitoring"
      width="100%"
      height="100%"
      :src="iframeUrl"
    ></iframe>
  </div>
// 变量定义省略
// methods：
 openAlarmDetail(id) {
   this.iframeUrl= `/test/${id}`;
 }

以上，触发openAlarmDetail函数时，可打印src值已经变化，仅仅是页面未刷新

---

错误原因：

iframe可能有缓存，页面没有重新加载，没有及时刷新

---

解决办法：

错误解法：
this.$nextTick(() => {
const iframe = document.getElementById(‘myIframe’);
iframe.src = this.detailUrl;
});
此方式我尝试无效

解法一： 给iframe加key(亲测有效）

 <div style="height: 100%">
    <iframe
      :key="ikey"
      class="process-monitoring"
      width="100%"
      height="100%"
      :src="iframeUrl"
    ></iframe>
  </div>
..........
  data() {
    return {
      ikey: new Date().getTime(), // 使用时间戳
     // 其他变量定义省略
     }
  }
// methods：
 openAlarmDetail(id) {
   this.ikey = new Date().getTime();  // 在改变绑定iframe的url之前，改变ikey的值（这里我使用的是时间戳）
   this.iframeUrl= `/test/${id}`;
 }
 // css
.process-monitoring {
  height: 100%;
  width: 100%;
  border: none;
  iframe {
    height: 100%;
    width: 100%;
    border: none;
  }
}

---

解法二： 监听url变化

watch: {
iframeUrl: {
	deep : true 
	handler(val) 
		document.getElementById('iframe的id').contentwindow.location.reload(true)
	}
 }
}

---

希望记录的问题能够帮助到你！
欢迎指正！