[TOC]
### 实现步骤：
#### 1. 使用布局组件
~~~
<template>
<div class="app-main">
<div class="app-main-header">
<Header
:system-list="systemList"
:sub-system-list="subSystemList"
@on-change-page="changePage"
/>
</div>
<div class="app-main-con">
<router-view />
</div>
</div>
</template>
~~~
#### 2. 使用路由控制加载组件
~~~
import Layout from "@/Layout";
export default {
path: "/yzt",
name: "YZT",
meta: {
navTitle: "一张图",
weight: 1, // 权重
icon: "icon-yizhangtu",
access: [] // 未来用于权限过滤
},
redirect: "/yzt/onemap",
component: Layout,
children: [
{
path: "onemap",
name: "OneMap",
meta: {
navTitle: "一张图",
icon: "icon-yizhangtu"
},
component: () => import(/* webpackChunkName: "OneMap" */ "YZT")
}
]
};
~~~
#### 3. 组件使用iframe加载子系统
~~~
<template>
<div class="yzy-con">
<iframe
:src="iframeUrl"
frameBorder="0"
width="100%"
height="100%"
></iframe>
</div>
</template>
<script>
export default {
data() {
return {
iframeUrl: ""
};
},
beforeMount() {
this.iframeUrl = this.$store.getters.config.CRM;
},
methods: {}
};
</script>
<style scoped lang="scss">
.yzy-con {
width: 100%;
height: 100%;
}
</style>
~~~
