vue3使用iframe引入其他网站，vue-router路由跳转后页面空白，刷新之后才展示页面内容乌龙事件

问题描述：vue3项目的页面A跳转到页面B时，页面B页面是空白的，需要手动刷新一下才能恢复正常，在页面A中用iframe引入了别的网站（后续事实证明，跟iframe没一毛钱的关系）。着急的童鞋可以直接拉到底部看看解决方案，不着急的童鞋可以看看自己的问题和文章中的是不是一样的。

最近做了一个新需求，就是在使用vue3做的项目中，使用iframe引入一个别的网站。这本来也没什么难的，就是新写了一个页面A，在页面A中增加以下代码：

// html （自行在css中给 iframe-container 设置高度）
<template>
  <!--  <div class="container">
          注释的内容
        </div> -->
  <div class="iframe-container">
    <iframe
      :src="data.externalUrl"
      width="100%"
      height="100%"
      frameborder="0"
      target="_top"
    ></iframe>
  </div>
</template>

    // ts(使用了 setup 语法糖)， reactive 自行引入即可
const data = reactive({
  externalUrl: 'https://blog.csdn.net/'   // 这里的地址自行替换成自己的
})

这个时候发现在页面A中引入的网站内容正常，但是从页面A跳转到vue3项目的页面B时，页面B页面是空白的，需要手动刷新一下才能恢复正常。发现问题第一时间检查有没有报错，发现没有报错；第二时间去问chatgpt，它给出了3个解决方案，都没能解决问题：

后来发现把iframe-container注释掉，用原来的container内容也不行了（iframe-container是刚加的，用来测试的），在增加测试代码 iframe-container之前是没问题的。然后就把iframe-container注释也删掉了，发现就正常了…

后来发现问题原因是：在 Vue 模板中，最外层的 标签中第一级不能有注释

对此，chatgpt的解释是（不保真，毕竟chatgpt也有一本正经地胡说八道的时候，参考上图）：

网上没精准地搜出真正的原因，可能是我检索的关键词不对。

所以最终解决办法是：删掉最外层的 标签中第一级的注释，跟 iframe 没有关系。

希望本文对您有所帮助，也请路过的大佬不吝赐教！