1、定義全部變量
new Vue({
el: "#app",
store,
router,
data: function() {
return {
systemCode: "", // 定義的變量
};
},
render: h => h(App)
});
2痰洒、切換的時候改變值瓢棒,在使用的頁面監(jiān)聽屬性變化
<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值连霉。