iframe的src修改可以不刷新页面补充有同鞋说上次那个iframe的说明不是很完善，所以这次来补充一下，这次我就用v

有同鞋说上次那个iframe的说明不是很完善，所以这次来补充一下，这次我就用vue写了，简单一些，不然写个事件那些都让我头大

环境

vite - vue2全家桶

为什么使用vite？就是vite多页面开发方便🥲

我准备了两个other文件，还有路由，这些页面都是使用的src下面的代码，就是为了区分一下url，看加载情况

Test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe测试</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    iframe{
      border: 1px red solid;
      height: 600px;
      width: 1080px;
    }
  </style>
  <link href="./public/vue2.6.14/elementUI2.15.8/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
  <div>
    <el-button @click="btnClick">切换</el-button>
  </div>
  <iframe :src="src" frameborder="0"
    @load="iframeLoad"
  ></iframe>
</div>
<script src="./public/vue2.6.14/vue.min.js"></script><!--引入一个vue方便些-->
<script src="./public/vue2.6.14/elementUI2.15.8/index.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data(){
      return {
        src: 'http://localhost:81/',
        count: 1
      }
    },
    methods:{
      btnClick(){
        switch (this.count){
          case 1:
            this.count = 2
            this.src = 'http://localhost:81/other/index.html'
            break;
          case 2:
            this.count = 3
            this.src = 'http://localhost:81/other/other.html'
            break;
          case 3:
            this.count = 4
            this.src = 'http://localhost:81/other/other.html#/dynamicTable'
            break;
          case 4:
            this.count = 5
            this.src = 'http://localhost:81/other/other.html#/selectObject'
            break;
          case 5:
            this.count = 1
            this.src = 'http://localhost:81/'
            break;
        }
      },
      iframeLoad(){
        console.log('加载完成',this.src)
      }
    }
  })
</script>
</body>
</html>