vue iframe嵌入常见问题 及 解决方案

需求：需要根据点击不同的详情，配置不同的tabs，展示不同的iframe内容。
解决：动态配置路由，根据跳转不同的id，生成对应的tabs标题。

        {
          path: '/other-view-iframe/:id',
          name: 'other-view-iframe',
          component: () => import(/* webpackChunkName: "flow-create" */ '@/views/common/frame/Frame'),
        }

问题1：切换tabs(iframe)，iframe内容没有被加载，没有更新。
原因：切换tabs的逻辑是

this.$router.push({name,params})

而在不同iframe切换时name是同一个。所以没有进行实际意义上的跳转，也没有加载mounted钩子。
解决：
在@/views/common/frame/Frame页面，监听$route

  mounted() {
    this.analysisRouter()
  },
  watch: {
    $route: {
      handler(to, from) {
        this.analysisRouter()
      },
      deep: true
    }
  }

问题2：这时候发现iframeUrl已经更改，但是页面并没有刷新。
解决：通过v-if来控制iframe，让iframe消失且重新加载。

    <iframe
      v-if="reloadIframe"
      :src="iframeUrl"
      width="100%"
      height="100%"
    ></iframe>

  methods: {
    analysisRouter() {
      this.loading = true;
      const { codeSearch, url } = this.$route.params;
     // 先让iframe销毁
      this.reloadIframe = false;
      this.$nextTick(() => {
      // 赋值地址，再加载
        this.iframeUrl = `${url}/${codeSearch}`
        this.reloadIframe = true;
      })
    },
  },

问题3：加载iframe时需要时间，展示空白不友好，所以我们需要给iframe加上loading效果。

  <div v-loading="loading" style="width:100%;height:100%">
 <iframe
      @load="loading = false"
      v-if="reloadIframe"
      :src="iframeUrl"
      width="100%"
      height="100%"
    ></iframe>
  </div>

在iframe加载完时，让loading消失。

@load="loading = false"