父页面和子页面通信需要使用 postMessage

window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时，会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Post Message</title>
</head>
<body>
  <div>
    <div id="color">Frame Color</div>
  </div>
  <div>
    <iframe id="child" width="50%" src="http://172.16.110.188/test.html" height="50vw" scrolling="auto" frameborder="0"></iframe>
  </div>
  <script type="text/javascript">
    window.onload=function(){
      document.getElementById('child').contentWindow.postMessage('getcolor','http://172.16.110.188');
    }
    window.addEventListener('message',function(e){
      consolo.log("Get message from test.html");
      consolo.log(e);
    },false);
  </script>
</body>
</html>

<!-- test.html -->
<!doctype html>
<html>
<head>
  <style type="text/css">
    html,body{
      height:100%;
      margin:0px;
    }
    #container{
      widht:100%;
      height:100%;
      background-color:rgb(204, 102, 0);
    }
  </style>
</head>
<body style="height:100%;">
  <script type="text/javascript">
    var container=document.getElementById('container');
    window.addEventListener('message',function(e){
      consolo.log("Get message from test.html");
      consolo.log(e);
      
      window.parent.postMessage("ABC from test.html",'*');
    },false);
   
  </script>
</body>
</html>

vue下使用父组件

mounted() {
    window.addEventListener('message',function(e){
      if(e.data.type == 'addMenu'){
        console.log(e.data);
      }
    },false);
},

子组件需要发起时间的地址

// 是否在iframe
if (window.frames.length != parent.frames.length) {
	console.log("in frame");
	window.parent.postMessage({name:"回复邮件", type:"addMenu"},'*');
} else{
	this.$router.push({ path: "/abc/"});
}