Vue集成Iframe页面

1. 项目需求

• 我们切换为vue框架是后面的事情，之前还有一些功能页面是用jsp页面写的，而我们的管理系统需要既支持Vue的url，又要支持这些发布之后的jsp页面
• 还有一个就是切换tab回来的时候之前输入的东西还要存在
• 系统页面截图

2. 实现思路

• 针对这个问题，我们最开始的实现思路是写了一个iframe的通用组件，然后把不同的http的页面的url传递进来进行切换，但是这样不满足第二条，我们发现只要切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住东西，于是就有了下面的实现思路
• 我们在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在我们菜单栏的下面

<template>
    <!--路由渲染的功能模块区域-->
    <div class="router-out-content">
        <!--缓存部分页面的写法-->
        <keep-alive>
            <router-view v-show="!showIframe" class="position router-content" v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-show="!showIframe" class="position router-content" v-if="!$route.meta.keepAlive"></router-view>
        <!--兼容系统外部页面-->
        <iframe-temp v-show="showIframe"></iframe-temp>
    </div>
</template>
<style scoped lang="scss">
    .position {
        position: relative
    }

    .router-out-content {
        position: static;
    }
</style>
<script>
import { mapState } from 'vuex'
import iframeTemp from '@/containers/main/IframeTemplate.vue'
export default {
    data() {
        return {}
    },
    components: {
        iframeTemp
    },
    computed: {
        ...mapState([
            'showIframe'
        ])
    }
}
</script>

/*
 * IframeTemplate.vue组件的内部
 **/

 <template>
    <!--iframe页面展示区域-->
    <div id="fwIframe">
        <!--<Tabs class="full temporary-tabs" v-model="store.state.iframeSelectTab" type="card">-->
        <Tabs class="full temporary-tabs" :value="iframeSelectTab" type="card">
            <TabPane
                v-for="(item, index) in iframeTabData"
                :key="item.tag"
                :label="item.name"
                :name="item.tag"
            >
                <iframe :key="item.tag" v-once :src="item.url" frameborder="0"></iframe>
            </TabPane>
        </Tabs>
    </div>
</template>
<style lang="scss">
    #fwIframe {
        /*测试位置的时候显示这段--开始*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*background-color: red;*/
        /*display: block !important;*/
        /*测试位置的时候显示这段--结束*/
        position: absolute;
        left: 0;
        right: 0;
        top: 45px;
        bottom: 0;
        z-index: 5000 !important;
        .el-tab-pane {
            height: 100%;
            width: 100%;
            iframe {
                /*height: auto;*/
                min-height: 600px;
                /*height: calc(100% - 45px);*/
                width: 100%;
            }

        }
        .full {
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }
</style>
<script>

    //  selectTabCode=>iframeSelectTab
    //  tabsList=>iframeTabData
    import {mapState} from 'vuex'
    import * as mainConst from '@/store/mainConst.js'
    export default{
        data(){
            return {
//                tabsList: [],
//                selectTabCode: ''
            }
        },
        computed: {
            ...mapState([
                'iframeTabData',
                'iframeSelectTab',
                'navTabData',
                'systemName'
            ])
        },
        mounted(){
            const _this = this

            // 1、监听添加iframe中tab的广播
            this.$root.bus.$on('addIframeTab', function (item) {

                // _this.tabsList.push(item)
                // _this.selectTabCode = item.tag
                _this.$store.commit(mainConst.M_IFRAME_PUSH_TAB, item)
                _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, item.tag)
            })

            // 2、监听切换iframe中tab的广播
            this.$root.bus.$on('changeIframeTab', function (tag) {
                _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, tag)

            })
            // 3、监听删除iframe中tab的广播
            this.$root.bus.$on('deleteIframeTab', function (obj) {
                // 1、删除iframe中的指定tab页面
                _this.$store.commit(mainConst.M_IFRAME_DELETE_TAB, obj)
                // _this.tabsList = _this.tabsList.filter(tab => tab.tag !== obj.tag)

                // 2、如果删除的一级tab不是当前激活的一级tab，TabsTemeplate中的一级tab删除事件已经在vuex中删除了，不需要做路由跳转操作了
                let index = obj.index
                for (let i = 0; i < _this.navTabData.length; i++) {
                    if (_this.navTabData[i].active) {
                        return
                    }
                }

                // 3、如果删除的一级tab是当前激活的一级tab，
                const con = _this.navTabData[index -