navMenu与右侧iframe页面关联

实现效果：点击iframe中的链接，会打开新的tab,并且左侧menu对应菜单高亮

实现方法：

一：子页面

1、子页面需点击跳转的标签添加click事件

点击时获取对应的id,text,url

<div @click="addIframe()">
    <el-link href="####">
   		<img src="images/ajbl.png" class="image"/>
    	<p>案件办理</p>
    </el-link>
</div>

2、将获取的内容转换为json字符串

addIframe(){
    // var jsontab = ‘{“url”:”‘ + url + ‘”,”dataId”:”‘ + dataId + ‘”,”text”:”‘ + text}’;
    var jsontab = '{"url":"slsp-db.html","id":"21","text":"案件办理"}';
    this.addParent(jsontab);
},

3、将数据传递给父级，调用父级方法

addParent(jsontab){
    window.parent.document.getElementById("hidep").value=jsontab;//input
    window.parent.document.getElementById("hideA").click();//a
    var menuId=JSON.parse(jsontab);
    window.parent.document.getElementById(menuId.id).click();//
},

## 二、父页面

1、父级页面隐藏域

<input type="text" id="hidep" style="display: none;"/>
<p id="hideA" style="display:none;" @click="addTabIframe($event)"></p>

2、el-submenu和el-menu-item动态绑定id,:id=”item.id”

<el-menu
	:default-active="defaultIndex"
	:active="navSelected"
	@select="menuSelected"
	:default-openeds="submenuOpen"
	unique-opened="true"
	background-color="#e7f0ff"
	text-color="#333"
	text-color-weight="500"
	active-text-color="#008cff"
	:collapse-transition="false"
	class="main-menu">
	<template v-for="item in menulist" :key="item.id">
		<el-submenu v-if="item.children && item.children.length" :index="item.id" :key="item.id" :id="item.id">
			<template slot="title">
				<i :class="item.iconCls"></i>
				<span>{{item.text}}</span>
			</template>
			<template v-for="itemChild in item.children" :key="itemChild.id">
				<el-menu-item :index="itemChild.id" :key="itemChild.id" :id="itemChild.id" @click="addTab(itemChild)">
					<li><span slot="title">{{itemChild.text}}</span></li>
				</el-menu-item>
			</template>
		</el-submenu>
		<el-menu-item v-else :index="item.id" :key="item.id" :id="item.id" @click="addTab(item)">
			<i :class="item.iconCls"></i>
			<span slot="title">{{item.text}}</span>
		</el-menu-item>
	</template>
</el-menu>

3、隐藏域click事件（调用addTab，添加tab）

addTabIframe(e){
    var hideContent=JSON.parse(document.getElementById("hidep").value);
    this.addTab(hideContent);
},

4、设置当前打开的 sub-menu 的 index 的数组(:default-openeds=”submenuOpen”)--二级菜单

menuSelected(index,indexPath){
    this.submenuOpen=[indexPath[0]];
},

注：7和3中最后一行实现iframe页面与menu的二级菜单关联。