Vue中使用iframe，多应用切换更新

1、定义全部变量

new Vue({
  el: "#app",
  store,
  router,
  data: function() {
    return {
      systemCode: "", // 定义的变量
    };
  },
  render: h => h(App)
});

2、切换的时候改变值，在使用的页面监听属性变化

<template>
  <iframe :key="iframeKey" class="myIframe" :src="iframeSrc"></iframe>
</template>
<script>
export default {
  name: "Task1",
  data() {
    return {
      iframeSrc: "",
      iframeKey: 0,
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        this.updateIframeSrc()
      }
    },
    "$root.systemCode": {
      handler() {
        this.updateIframeSrc()
      },
      deep: true
    }
  },
  methods: {
    updateIframeSrc() {
      this.iframeSrc = `http://localhost:9527/#/processDesigner?systemCode=${this.$root.systemCode}`
      this.iframeKey += 1;
    }
  },
};
</script>
<style scoped>
.myIframe {
  width: 100%;
  height: 100vh;
  border: none
}
</style>

3、当切换时，全局变量和url都已更新，但是iframe不会重新渲染，我们可以利用vue的key，改变他的key值。