iframe在vue路由切换时被销毁的解决方案即使使用了keep-alive，切换回路由时iframe依然重载实现的核

该问题的背景为：即使使用了keep-alive，切换回路由时iframe依然重载

实现的核心思想为将iframe元素置于document层级，不再受vue路由切换的影响，同时合理控制其和要展示的页面内元素的层级以及路由切换内iframe的显示与隐藏

页面内

给iframe添加样式，固定其位置和其层级

.iframeStyle{
    position: fixed;
    top: 0;
    left:4%;
    z-index: 1;
}

同时

 mounted() {
    // 将iframe元素置于document层级
    document.documentElement.appendChild(this.$refs.regionMap)
  },
 beforeDestroy() {
    document.documentElement.removeChild(this.$refs.regionMap)
  },

将页面内所有子元素层级提高，如果直接提高页面层级，则会覆盖iframe导致iframe无法操作

.main {
  position: relative;
    width: 100%;
  height: 100%;
  min-height: 750px;
  //控制层级，使得页面层级低于iframe,但页面内元素层级都高于iframe
  //一定不能给main添加层级！！！
    div{
    z-index: 10;
    }
    }

3.路由跳转时进行判断，控制iframe的显示和隐藏

router.beforeEach(async(to, from, next) => {
  // 内嵌三维地图iframe在路由切换时会重新加载,将其提高层级，控制显隐
  const iframe = document.getElementById('iframeStyle')
  if (to.name !== 'myComponentName' && iframe) {
    document.getElementById('iframeStyle').style.visibility = 'hidden'
  } else if (to.name === 'myComponentName' && iframe) {
    document.getElementById('iframeStyle').style.visibility = 'visible'
  }
  }
  )