有趣的iframe问题

今天遇到一个问题，当点击了按钮----跳转页面时----F12键点击网络中的状态报了已取消，类型是

document说明是前端页面的问题，如果是xhr那可能是接口的问题。

原本是写了3个iframe,页面刷新的时候请求了第一个iframe,然后就经过vue的那一层又重新请求了一遍，所以就有了报错

原来代码如下：

<div id="app">
    <el-tabs>
        <div slot="label" @click="handleClick("tab1")" ><i class="el-icon-date"></i>张三</div>
    <div v-if="tab=='tab1'">
        <iframe id="userzhangsan" height="750" width="100%" frameborder="0" src="../hahah"></iframe>
    </div>
    </el-tabs>


    <el-tabs>
        <div slot="label" @click="handleClick("tab2")" ><i class="el-icon-date"></i>李四</div>
    <div v-if="tab=='tab1'">
        <iframe id="userlishe" height="750" width="100%" frameborder="0" src="../hahah"></iframe>
    </div>
    </el-tabs>


    <el-tabs>
        <div slot="label" @click="handleClick("tab2")" ><i class="el-icon-date"></i>王五</div>
    <div v-if="tab=='tab1'">
        <iframe id="userwangwu" height="750" width="100%" frameborder="0" src="../hahah"></iframe>
    </div>
    </el-tabs>
<div>

解决方案就是写个for循环就行

<div id="app" class="app-content" v-cloak>
    <el-tabs type="border-card" :lazy="true">
        <el-tab-pane v-for="(tabItem, index) in tabs" :key="index">
            <div :slot="'label'" @click="handleClick(tabItem.name)">
                <i :class="tabItem.icon"></i> {{ tabItem.label }}
            </div>
            <div v-if="tab === tabItem.name">
                <iframe :id="tabItem.iframeId" :height="tabItem.height" :width="tabItem.width" frameborder="0" :src="tabItem.src"></iframe>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>

这里补充一下：还有其它情况的请点击链接：前端页面被取消的重复请求 - 掘金