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值。
