网上查询了很多使用iframe+vue.js做导航菜单实现页面切换的，但没一个写的让我满意的。

这话是实话，大多数博客都是大佬在写，有很多知识点和专业名词貌似都是默认的，很多细节问题都囫囵吞枣的过去，然后复杂化简单的问题，所以写一篇新手向的iframe+element ui +vue.js的教程。

首先去element ui的官网复制一个表格，导入vuejs和elementui的index 这没的说，这都不会可以先把iframe导航功能放一边了。

然后写好页面模板和数据，这里放一段我的代码借鉴一下

<div id="app">
    <el-container >
        <el-header height="150px">
            <font>SYS</font>
        </el-header>
        <el-container>
            <el-aside width="200px" height="500px">
                <br>
                <br>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item v-on:click="changeUrl('http://localhost:8080/owner.html')">Owner</el-menu-item>
                    <el-menu-item v-on:click="changeUrl('http://localhost:8080/buildings.html')">Buildings</el-menu-item>
                    <el-menu-item v-on:click="changeUrl('http://localhost:8080/buildings.html')">remarks</el-menu-item>
                    <el-menu-item v-on:click="changeUrl('http://localhost:8080/buildings.html')">review</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe v-bind:src="url" width="80%"  frameborder="no" height="500"></iframe>
            </el-main>
        </el-container>
    </el-container>

</div>

以上代码是前端页面的代码

其中，在el-main部分加入iframe标签，这也是我们要展示外部页面的地方，整个外部页面的内容要放到这里。

el-menu-item这个标签内使用v-on绑定了一个changeUrl的方法，这个下面会讲，注意里面的参数，是你要切换的网址。

函数带参，这个就不讲了，如果这个你不会的话先去把java的基础学好再来做这个。

iframe用v-bind绑定一个属性（这里v-bind是vue.js用来绑定属性值的一个属性，vue中的双向绑定还是很好用的，可以方便我们更改url）

src地址属性绑定了url这个数据。

主要问题不是html的问题

下面是一段js的代码：

let appVue=new Vue({
        el:'#app',
        data:{
            url:'http://localhost:8080/owner.html',
        },
        methods:{
            changeUrl(changeUrl){
                this.url=changeUrl;
            }
        },
    })

简洁明了，data设置url的默认值，在methods方法内加入changeUrl的方法

简直不要太简单，把参数的字符串赋值给url即可

这是最基础的导航菜单功能就实现了，在此基础上还可以扩展更多的功能，这里就不做详细了。