请求的接口响应状态为已取消的原因

有趣的iframe问题

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

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

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

原来代码如下：

"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>

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

"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>