vue3 uses iframe to introduce other websites. After the vue-router route jumps, the page is blank, and the page content is displayed after refreshing. Oolong event

Problem description: When page A of the vue3 project jumps to page B, page B is blank and needs to be refreshed manually to return to normal. In page A, iframe is used to introduce other websites (subsequent facts prove that it is not the same as iframe). dime relationship). Those who are anxious can scroll directly to the bottom to see the solution. Those who are not anxious can see if their problems are the same as those in the article.

Recently, I made a new requirement, which is to use iframe to introduce another website in a project using vue3. This is not difficult at all, just write a new page A and add the following code to page 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/'   // 这里的地址自行替换成自己的
})

At this time, it was found that the website content introduced in page A was normal, but when jumping from page A to page B of the vue3 project, page B was blank and needed to be refreshed manually to return to normal. After discovering the problem, I immediately checked whether there was any error and found that there was no error. The second time I asked chatgpt, it gave 3 solutions, but none of them solved the problem: I later found out that I had to comment out the iframe-container and

use the original container content. It doesn't work anymore (iframe-container was just added for testing). It was fine before adding the test code iframe-container. Then I deleted the iframe-container comment and found that it was normal...

Later I discovered that the cause of the problem was: in the Vue template, the first level of the outermost tag cannot have comments.

In this regard, chatgpt’s explanation is (not true, after all, chatgpt also sometimes talks nonsense seriously, refer to the picture above): The

real reason cannot be found accurately on the Internet, maybe the keywords I searched are wrong.

So the final solution is: delete the first-level comments in the outermost tag, which has nothing to do with the iframe.

I hope this article is helpful to you, and please feel free to give me some advice from those who pass by!