vue中如何通过iframe方式加载本地的vue页面

<iframe
  src="http://127.0.0.1:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

<iframe
  src="http://localhost:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

<iframe
  src="../index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>
// 或者是像这样的路径
<iframe
  src="../#/index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

<iframe
 style="width: 100%; height: 100%"
 scrolling="no"
 class="iframe"
 :src="item.path"
 frameborder="0"
></iframe>

methods: {
//ui组件给的回调
   handleClick(tab, event) {
   //参数详见elemntui的tabs，这里只用到了tab.index获取点击文章的序号
     const oIframe = document.getElementsByClassName("el-tabs__content")[0]
       .children;
     const iframe = oIframe[tab.index].children[0].children[1].children[0];
     //以上都是找元素节点iframe的过程可忽略（因为用了v-for所以找起来会有点麻烦）
     this.$nextTick(function () {
       iframe.style.height =
         iframe.contentWindow.document.body.offsetHeight + "px";
         //contentWindow中有iframe对应网页的全部信息，包括windows、document等
     });
   },
 },

mounted() {
    const oIframe = document.getElementsByClassName("el-tabs__content")[0]
      .children;
    //该处dom操作的耦合性较高，待优化
    const iframe = oIframe[0].children[0].children[1].children[0];
    //以上都是找元素节点iframe的过程可忽略（因为用了v-for所以找起来会有点麻烦）
    this.$nextTick(function () {
      iframe.contentWindow.window.onload = () => {
        if (iframe.contentWindow.document.readyState == "complete") {
          iframe.style.height =
            iframe.contentWindow.document.body.offsetHeight + "px";
        }
      };
    });
  },