一般后台界面都有三大部分 , 顶部导航 , 左侧导航,右侧的主界面 . 点击左侧和顶部的导航 , 可以在右侧的主界面展示不同的界面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
大部分后台的界面都是使用的iframe嵌套的形式,基于vue也是可以方便的使用iframe的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
html部分如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
主要就是给iframe绑定一个变量 , 给左侧导航绑定点击事件 ,都是vuejs里面的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
<div id="app"><template><el-menu
class="hg-header"
default-active="2"
mode="horizontal"><el-menu-item index="1" class="mainLogo">海广传媒</el-menu-item><el-menu-item index="2">舆情监控</el-menu-item><el-menu-item index="3">媒资库</el-menu-item><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown><span>yalaya</span></el-header></el-menu><el-container><el-aside width="200px"><el-menu
default-active="1"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"><el-menu-item index="1" v-on:click="openUrl('', '微博监控')"><i class="el-icon-menu"></i><span slot="title">微博监控</span></el-menu-item><el-menu-item index="3" v-on:click="openUrl('', '头条监控')"><i class="el-icon-menu"></i><span slot="title">头条监控</span></el-menu-item></el-menu></el-aside><el-main class="mainMain"><iframe id="mainIframe" class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe></el-main></el-container></template></div>可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on:click=""绑定点击事件并且调用一个方法 , v-bind:src 是给属性绑定变量 , 属性的必须这么写
方法都是写在methods块里文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
"&time="+new Date().getTime(); 可以防止url没有变化的时候 , 界面不变化不刷新文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
js部分如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18827.html
<script src=""></script><!-- 引入组件库 --><script src=""></script><script>new Vue({
el: '#app',
data: function () {
return {
iframeUrl: "",
}
},
methods: {
openUrl: function (url,msg) {
this.iframeUrl=url+"&time="+new Date().getTime();
},
}
});
</script>