iframe嵌入父子项目，外层框架（用父框架左侧菜单，子框架左侧菜单隐藏iframe嵌入父框架）

一：父框架，外层框架（用父框架左侧菜单，子框架左侧菜单隐藏iframe嵌入父框架）

1. iFrame/index.vue:

<template>

  <div v-loading="loading" :style="'height:' + height">

    <iframe

      :src="src"

      frameborder="no"

      style="width: 100%; height: 100%"

      scrolling="auto"

    />

  </div>

</template>

<script>

export default {

  props: {

    src: {

      type: String,

      required: true

    },

  },

  data() {

    return {

      height: document.documentElement.clientHeight - 240 + "px;",

      loading: true,

      url: this.src

    };

  },

  mounted: function () {

    setTimeout(() => {

      this.loading = false;

    }, 300);

    const that = this;

    window.onresize = function temp() {

      that.height = document.documentElement.clientHeight - 94.5 + "px;";

    };

  }

};

</script>

2. cmdb/index.vue:

<template>

  <div>

    <iFrame :src="src"></iFrame>

  </div>

</template>

<script>

import iFrame from "@/components/iFrame/index.vue"; // iframe

export default {

    components: {

        iFrame

    },

    data() {

        return {

            src: '',

            // baseUrl: 'http://101.16.2125.153/#' // 本地

            // baseUrl: 'http://1101.17.410.1178:1101176/dist/#' // cmdb 测试地址

            // baseUrl: 'http://3181.159.1177.1182:110176/dist/#' // cmdb 正式地址

            baseUrl: process.env.NODE_ENV === 'development' ? 'http://101.16.2125.153/#' : window.location.protocol + '//' + window.location.host  + '/dist/#' // 动态获取

            // baseUrl: process.env.NODE_ENV === 'development' ? 'http://101.16.2125.153/#' : window.location.origin + '/dist/#' // 动态获取

        }

    },

    watch: {

        $route: {

            handler(newVal) {

                 this.src = this.baseUrl +  newVal.path + '?Authorization=' + sessionStorage.getItem('Authorization')

            },

            deep: true,

            immediate:true

        }

    },

}

</script>

<style>

</style>

二 子项目路由