vue中组件刷新,避免加载缓存？

Question

vue中组件刷新,避免加载缓存？

在element-ui table中插入了html文件，每一次展开都会发送请求，后台都会更新这两个文件，但是页面总是加载上一次请求得到的html文件。给iframe绑定了key，然后每次请求成功后都改变key值，但没什么用

html:

<el-table-column type="expand" v-loading="loading">
            <template>
              <div class="scatter" style="float: left;width: 50%;" id="scatter">
                             <iframe src="static/picScatter.html" frameborder="0" class="pic" style="height: 400px;width: 100%;margin: 0;" id="scatterPic" :key="scatter"></iframe>
              </div>
              <div class="box" style="float: right;width: 50%;" id="box">
                <iframe src="static/picBox.html" frameborder="0" class="pic" style="height: 400px;width: 100%;margin: 0;" id="picBox.html" :key="box"></iframe>
              </div>
            </template>
</el-table-column>

data:

data () {
      return {
        scatter: 0,
        box: 1,

methods:

getRowKeys (row) {
        return row.bodysite
      },
expandSelect (row, expandedRows) {
    var that = this
    console.log(row)
    if (expandedRows.length) {
        that.expands = []
        if (row) {
            that.expands.push(row.bodysite)
        }
    }else{
        that.expands = []
    }
    this.loading = true
    this.$axios
        .get('taxonsDetail', { params: { id: this.speciesInfo.id,site: row.bodysite } })
        .then(res => {
                console.log(res.data)
            if (res.data.results === "success"){
                this.box += 1
                this.scatter += 1
            }
        })
}

Answer 1

充分了解一下浏览器的缓存机制。
get请求只要url没有变化，一定会走缓存。
所以解决办法是将iframe的src动态化