vue tab页下使用iframe访问外部系统页面，切换时如何不刷新

Question

网上看到一些使用iframe切换页面保留用户操作记录的方法，大概就是在iframe上加一个判断。按照这个做法，并没有得到预期的效果，想问一下是我用的不对，还是有其他方法。一下是我的代码：

<a-tabs
            @contextmenu.native="e => onContextmenu(e)"
            :activeKey="activePage"
            type="editable-card"
            class="tab-layout-tabs"
            style="height:100%"
            @change="changePage"
            :tabBarStyle="{'margin-bottom': '0px','background-color': '#fff'}"
            hideAdd
            @edit="editPage">
            <a-tab-pane key="index" tab="首页" :closable="false">

            </a-tab-pane>
            <a-tab-pane :key="page.nodeId" :tab="page.text" v-for="page in pageList" style="width:100%;height:100%;" :forceRender="true">
                    <div style="margin: 5px 5px 0px;height: 100%;">
                            <iframe v-if="activePage == page.nodeId" :src="page.url" scrolling="auto"  frameborder="0" style="width:100%;height:100%;"></iframe>
                    </div>
            </a-tab-pane>
    </a-tabs>
<script>
var indexKey = '1';
export default {
    data(){
        return{
           pageList : [], // 打开的页面
           keyList: [],
           activePage: 'index', // 当前激活 tab 面板的 key
           activePageOld: [], // 选中过的tab
        }
    },
    methods : {
        changePage(key) {
            this.activePage = key;
            this.activePageOld.push(this.activePage);
            // 选中对应菜单
            this.$refs.globalLayout.$refs.menuTemplate.tabSelectMenu(key);
        },
        // 新增或删除时触发
        editPage(key, action) {
            this[action](key)
        },
        remove(key) {
            if (key == indexKey) {
            this.$message.warning('首页不能关闭!')
            return
            }
            if (this.pageList.length === 1) {
            this.$message.warning('这是最后一页，不能再关闭了啦')
            return
            }
            // 过滤关闭的tab
            this.pageList = this.pageList.filter(item => item.nodeId !== key)
            let index = this.keyList.indexOf(key)
            this.keyList = this.keyList.filter(item => item !== key)
            index = index >= this.keyList.length ? this.keyList.length - 1 : index
            this.activePage = this.keyList[index]
        },
        // 右键事件
        onContextmenu(e) {
            const pagekey = this.getPageKey(e.target)
            if (pagekey !== null) {
            e.preventDefault()
            this.menuVisible = true
            }
        },
        getPageKey(target, depth) {
            depth = depth || 0
            if (depth > 2) {
            return null
            }
            let pageKey = target.getAttribute('pagekey')
            pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
            return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
        },
    }
}
</script>

Answer 1

vue 加一个key属性到iframe