learning-system-portal/src/views/Forward.vue

<template>
  <div class="box" :class="{ incl: url.includes('projectdetails') }">
    <portal-header style="background: #387DF7;" :hideSearch="true" textColor="#ffffff"></portal-header>
        <iframe :src="url" style="width: 100%;height: 100%;" frameborder="0" ref="iframe"></iframe>
    <portal-footer></portal-footer>
  </div>
</template>
<script>
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
  export default {
    components: {
      portalHeader,
      portalFooter
    },
    data(){
      return {
       url: "",
       boeUrl:process.env.VUE_APP_BOE_WEB_URL
      }
    },
    mounted() {
      let params = this.$route.query.params;// 跳转的参数 encodeURIComponent 之后的
      let to = this.$route.query.to;//跳转的地址，以 /开头的地址
      let urlPre=window.location.protocol+'//'+window.location.host;
      this.url=urlPre+to
      if(params){
         this.url=this.url+'?'+params;
      }
      window.addEventListener('message', this.handleMessageFromChild);
    },
    beforeDestroy() {
      window.removeEventListener('message', this.handleMessageFromChild);
    },
    methods:{
      handleMessageFromChild(event) {
        if (event.origin !== process.env.VUE_APP_BOE_MOBILE_URL) return;
        if (event.data && event.data.type === 'navigate') {
          this.navigate(event.data.path);
        }
      },
      navigate(path) {
        this.$router.push({
          path:path
        })
      },
    }
  }
</script>
<style lang="scss" >
.box{
    // width: 100%;
    //background: #387DF7;
    height: 100%;
}
.incl{
  overflow: hidden;
  padding-bottom: 100px;
}
</style>