您好,登录后才能下订单哦!
这篇文章主要为大家展示了“Vue如何集成Iframe页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何集成Iframe页面”这篇文章吧。
1. 项目需求
我们切换为vue框架是后面的事情,之前还有一些功能页面是用jsp页面写的,而我们的管理系统需要既支持Vue的url,又要支持这些发布之后的jsp页面
还有一个就是切换tab回来的时候之前输入的东西还要存在
系统页面截图
2. 实现思路
针对这个问题,我们最开始的实现思路是写了一个iframe的通用组件,然后把不同的http的页面的url传递进来进行切换,但是这样不满足第二条,我们发现只要切换了vue的路由,然后再切回http的页面,iframe中的src属性的页面就会从新刷新,没有办法保留住东西,于是就有了下面的实现思路
我们在vue的router-view同级别添加了一个iframeTemp组件,其实就是一个elementUI的tab组件,然后把tab组件的头的样式隐藏在我们菜单栏的下面
<template> <!--路由渲染的功能模块区域--> <div class="router-out-content"> <!--缓存部分页面的写法--> <keep-alive> <router-view v-show="!showIframe" class="position router-content" v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-show="!showIframe" class="position router-content" v-if="!$route.meta.keepAlive"></router-view> <!--兼容系统外部页面--> <iframe-temp v-show="showIframe"></iframe-temp> </div> </template> <style scoped lang="scss"> .position { position: relative } .router-out-content { position: static; } </style> <script> import { mapState } from 'vuex' import iframeTemp from '@/containers/main/IframeTemplate.vue' export default { data() { return {} }, components: { iframeTemp }, computed: { ...mapState([ 'showIframe' ]) } } </script>
/* * IframeTemplate.vue组件的内部 **/ <template> <!--iframe页面展示区域--> <div id="fwIframe"> <!--<Tabs class="full temporary-tabs" v-model="store.state.iframeSelectTab" type="card">--> <Tabs class="full temporary-tabs" :value="iframeSelectTab" type="card"> <TabPane v-for="(item, index) in iframeTabData" :key="item.tag" :label="item.name" :name="item.tag" > <iframe :key="item.tag" v-once :src="item.url" frameborder="0"></iframe> </TabPane> </Tabs> </div> </template> <style lang="scss"> #fwIframe { /*测试位置的时候显示这段--开始*/ /*width: 100%;*/ /*height: 100%;*/ /*background-color: red;*/ /*display: block !important;*/ /*测试位置的时候显示这段--结束*/ position: absolute; left: 0; right: 0; top: 45px; bottom: 0; z-index: 5000 !important; .el-tab-pane { height: 100%; width: 100%; iframe { /*height: auto;*/ min-height: 600px; /*height: calc(100% - 45px);*/ width: 100%; } } .full { position: relative; left: 0; right: 0; top: 0; bottom: 0; } } </style> <script> // selectTabCode=>iframeSelectTab // tabsList=>iframeTabData import {mapState} from 'vuex' import * as mainConst from '@/store/mainConst.js' export default{ data(){ return { // tabsList: [], // selectTabCode: '' } }, computed: { ...mapState([ 'iframeTabData', 'iframeSelectTab', 'navTabData', 'systemName' ]) }, mounted(){ const _this = this // 1、监听添加iframe中tab的广播 this.$root.bus.$on('addIframeTab', function (item) { // _this.tabsList.push(item) // _this.selectTabCode = item.tag _this.$store.commit(mainConst.M_IFRAME_PUSH_TAB, item) _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, item.tag) }) // 2、监听切换iframe中tab的广播 this.$root.bus.$on('changeIframeTab', function (tag) { _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, tag) }) // 3、监听删除iframe中tab的广播 this.$root.bus.$on('deleteIframeTab', function (obj) { // 1、删除iframe中的指定tab页面 _this.$store.commit(mainConst.M_IFRAME_DELETE_TAB, obj) // _this.tabsList = _this.tabsList.filter(tab => tab.tag !== obj.tag) // 2、如果删除的一级tab不是当前激活的一级tab,TabsTemeplate中的一级tab删除事件已经在vuex中删除了,不需要做路由跳转操作了 let index = obj.index for (let i = 0; i < _this.navTabData.length; i++) { if (_this.navTabData[i].active) { return } } // 3、如果删除的一级tab是当前激活的一级tab, const con = _this.navTabData[index - 1] || _this.navTabData[index] let url = `/${_this.systemName}` if (con) { // 还有其他的一级tab,就赋值其他的一级tab的url,探后跳转 url = con.url con.active = true // 如果还有其他一级的tab,那么还要判断跳转的页面是不是iframe if (url.toLowerCase().indexOf("/iframe") == 0) { // 如果是iframe页面,显示iframe,广播iframe的切换tab切换事件,路由进行跳转 _this.$store.commit(mainConst.M_SHOW_IFRAME) _this.$root.bus.$emit("changeIframeTab", url.slice(8)) } else { // 如果不是iframe页面,隐藏iframe,路由进行跳转 _this.$store.commit(mainConst.M_HIDE_IFRAME) // _this.$store.commit(mainConst.M_UPDATE_NAVTABDATA, {navIndex: index}) } } else { // 没有其他的一级tab,直接隐藏iframe,跳首页 _this.$store.commit(mainConst.M_HIDE_IFRAME) } _this.$router.push(url) }) } } </script>
之后的ifram组件的显示隐藏和tab切换,都是通用vuex和bus事件广播实现的
/* * mainConst.js **/ /*****************************getter常量****************************************/ export const G_GET_NAVTABDATA = 'G_GET_NAVTABDATA' /*****************************mutations常量*************************************/ // 一级tab处理 export const M_PUSH_NAVTABDATA = 'M_PUSH_NAVTABDATA' export const M_DELETE_NAVTABDATA = 'M_DELETE_NAVTABDATA' export const M_UPDATE_NAVTABDATA = 'M_UPDATE_NAVTABDATA' // iframe切换处理 export const M_SHOW_IFRAME = 'M_SHOW_IFRAME' export const M_HIDE_IFRAME = 'M_HIDE_IFRAME' // iframe添加,删除,选择处理 export const M_IFRAME_PUSH_TAB='M_IFRAME_PUSH_TAB' export const M_IFRAME_DELETE_TAB='M_IFRAME_DELETE_TAB' export const M_IFRAME_CHANGE_SELECTCODE='M_IFRAME_CHANGE_SELECTCODE' // 设置全局系统变量 export const M_SET_SYSTEMNAME = 'M_SET_SYSTEMNAME' /*****************************actions常量***************************************/ // export const A_REQUEST_DATA = 'A_REQUEST_DATA'
/* * mainModule.js **/ import * as mainConst from './mainConst.js' export default { state: { // 一级Tab导航数据集合 navTabData: [], // 进入的主系统前缀 systemName:'', // 控制路由同级的Iframe的显示隐藏 showIframe: false, // iframe页面中的选中页签的code值 iframeSelectTab:'', // iframe页面的tab数据集合 iframeTabData:[] }, getters: { [mainConst.G_GET_NAVTABDATA](state, getters){ return state.navTabData } }, mutations: { // 一级tab处理 [mainConst.M_UPDATE_NAVTABDATA](state, payload){ const index = payload.navIndex state.navTabData.forEach((item)=> { item.active = false }) // 当你利用索引直接设置一个项时是不能触发视图的从新渲染的,下面是老方法和解决办法 // state.navTabData[index].active=true let newItem = Object.assign({}, state.navTabData[index], {active: true}) // console.log(newItem, 'store newItem') state.navTabData.splice(index, 1, newItem) }, [mainConst.M_PUSH_NAVTABDATA] (state, payload) { state.navTabData.push(payload) }, [mainConst.M_DELETE_NAVTABDATA] (state, payload) { state.navTabData.splice(payload.navIndex, 1) }, // Iframe显示隐藏切换处理 [mainConst.M_SHOW_IFRAME] (state, payload) { state.showIframe = true }, [mainConst.M_HIDE_IFRAME] (state, payload) { state.showIframe = false }, // Iframe添加,删除,选中处理 [mainConst.M_IFRAME_PUSH_TAB] (state, payload) { state.iframeTabData.push(payload) }, [mainConst.M_IFRAME_DELETE_TAB] (state, payload) { state.iframeTabData = state.iframeTabData.filter(tab => tab.tag !== payload.tag) }, [mainConst.M_IFRAME_CHANGE_SELECTCODE] (state, payload) { state.iframeSelectTab=payload }, // 设置全局system变量 [mainConst.M_SET_SYSTEMNAME] (state, payload) { state.systemName=payload } }, actions: { // actions的最终功能是修改state,但是它不直接修改state,而是调用mutations // async [aboutConst.A_REQUEST_DATA]({dispatch,commit}) { // commit(aboutMutations.REQUEST_LOADING) // await service.getMovieListData('{"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}') // console.log(333333) // await function(){setTimeout(function () { // commit(aboutMutations.REQUEST_FAILD) // },6000)}() // console.log(66666) // } // actions的最终功能是修改state,但是它不直接修改state,而是调用mutations // async [aboutConst.A_REQUEST_DATA]({dispatch,commit}) { // commit(aboutMutations.REQUEST_LOADING) // await service.getMovieListData('{"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}') // console.log(333333) // await function(){setTimeout(function () { // commit(aboutMutations.REQUEST_FAILD) // },6000)}() // console.log(66666) // } } }
/* * 三级菜单的点击处理 **/ <template> <!--三级菜单导航功能--> <div class="main-nav f14 clearfix" @mouseleave="funMenu.menuIsShow=false"> <div class="f_l lt-tab"> <ul class="l-nav clearfix"> <li class="main f_l"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="f16 fun" @click="getMainMenu">功能导航</a> <div class="more-menu clearfix" v-show="funMenu.firstMenu.length&&funMenu.menuIsShow"> <!--一级导航--> <ul class="first-menu f_l"> <li v-for="(item,index) in funMenu.firstMenu" @mouseover="clickByMenu($event,item,'firstMenu')"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:item.active}" :index="index">{{item.resourceName}}</a> </li> </ul> <!--二级导航--> <ul class="next-menu f_l" v-show="funMenu.nextMenu.length"> <li v-for="(item,index) in funMenu.nextMenu" @mouseover="clickByMenu($event,item,'nextMenu')" @click="clickMenuJump(funMenu.nextMenu, item)" > <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:item.active}" :index="index">{{item.resourceName}}</a> </li> </ul> <!--三级导航--> <!--存在四级导航--> <div class="last-menu f_l dl" v-show="funMenu.lastMenu.length"> <div v-for="(item,index) in funMenu.lastMenu" class="dt"> <div v-if="item.childFuncs.length"> <span>{{item.resourceName }}</span> <ul class="dd"> <li v-for="(item,index) in item.childFuncs" @click="clickByMenu($event,item,'lastMenu')"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.resourceName}}</a> <!--:class="{active:item.active}"--> </li> </ul> </div> <!--三级导航可点击--> <div v-else> <ul class="dd"> <li @click="clickByMenu($event,item,'lastMenu')"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.resourceName}}</a> <!--:class="{active:item.active}"--> </li> </ul> </div> </div> </div> </div> </li> <li class="nav-index f_l"> <!--<router-link :to="'/'+$store.state.systemName">首页</router-link>--> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="goHome">首页</a> </li> </ul> </div> </div> </template> <style scoped lang="scss"> .main-nav { position: relative; height: 42px; line-height: 42px; background: #eee; border-bottom: 1px solid #ddd; } .main-nav a { color: #303e51; text-decoration: none; } .main-nav a:hover { color: #438eb9; } .main-nav .main { /*padding: 0 16px;*/ text-align: center; border-right: 1px solid #ddd; position: relative; background: #eee; width: 122px; } .main-nav .main.active, .main-nav .main:hover { background: white; } .main-nav .more-menu { position: fixed; top: 84px; left: 0; max-height: 500px; bottom: 124px; z-index: 998; background: #fff; border: 1px solid #ddd; border-left: none; border-top: 0; overflow: hidden; box-shadow: 1px 1px 10px #ddd; } .main-nav .more-menu ul, .main-nav .more-menu .dl { text-align: left; overflow: auto; } .main-nav .more-menu a { font-size: 14px; color: #303e51; text-decoration: none; } .main-nav .more-menu a:hover, .main-nav .more-menu a.active { color: rgb(46, 167, 224); } .main-nav .more-menu .first-menu { height: 100%; border-right: 1px solid #ddd; box-shadow: -1px 0px 5px #ddd inset; /*width: 138px;*/ } .main-nav .more-menu .first-menu li { height: 36px; line-height: 36px; margin: 0 15px 0 6px; min-width: 94px; } .main-nav .more-menu .first-menu a { display: block; background: url(../../asserts/images/home/main/icon_1.png) no-repeat 5px center; width: 100%; height: 100%; border-bottom: 1px solid #dddddd; padding-left: 20px; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-indent: 5px; } .main-nav .more-menu .first-menu a.active, .main-nav .more-menu .first-menu a:hover { background: url(../../asserts/images/home/main/icon_2.png) no-repeat 5px center rgb(46, 167, 224); color: white; border: 0; } .main-nav .more-menu .next-menu { height: 100%; border-right: 1px solid #ddd; box-shadow: -1px 0px 5px #ddd inset; /*width: 138px;*/ line-height: 14px; } .main-nav .more-menu .next-menu li:first-child { margin-top: 10px; } .main-nav .more-menu .next-menu li { margin-bottom: 16px; margin-left: 16px; } .main-nav .more-menu .next-menu li a { border-left: 2px solid transparent; padding-left: 10px; margin-right: 24px; } .main-nav .more-menu .next-menu li a:hover, .main-nav .more-menu .next-menu li a.active { border-left: 2px solid rgb(46, 167, 224); } .main-nav .more-menu .last-menu { height: 100%; min-width: 288px; line-height: 14px; } .main-nav .more-menu .last-menu .dt { margin-left: 16px; margin-top: 10px; span { color: #566678; } } .main-nav .more-menu .last-menu .dd { color: #7a8897; margin-top: 16px; margin-left: 4px; > li { margin-bottom: 16px; a { border-left: 2px solid transparent; padding-left: 6px; margin-right: 16px; &:hover, &.active { border-color: #2ea7e0; } } } } /*.main-nav .more-menu .last-menu dd a:hover,.main-nav .more-menu .last-menu dd a.active{*/ /*border-left: 2px solid rgb(46,167,224);*/ /*}*/ .main-nav .main .fun { width: 100%; height: 100%; display: block; } .main-nav .main .fun:before { content: ""; width: 18px; height: 18px; background: url("../../asserts/images/home/main/icon-all.png"); background-position: -89px -7px; display: inline-block; margin-right: 10px; margin-top: 2px; vertical-align: text-top; } .main-nav .l-nav { z-index: 2; } .main-nav .nav-index { width: 90px; text-align: center; position: relative; background: #eee; } .main-nav .nav-index:after { content: ""; width: 8px; height: 40px; background: url(../../asserts/images/home/main/shadow-l.png); position: absolute; top: 2px; left: 90px; } .main-nav .lt-tab { position: absolute; left: 0; z-index: 2; border-bottom: 1px solid #ddd; } /*tab--------*/ .main-nav .ct-tab { position: absolute; z-index: 1; left: 213px; width: 10000000px; } .main-nav .ct-tab .ct-ul { } .main-nav .ct-tab .ct-ul li { position: relative; float: left; } .main-nav .ct-tab .ct-ul li a { height: 24px; line-height: 24px; margin: 9px 0; min-width: 90px; /*max-width: 190px;*/ border-right: 1px solid #ddd; display: block; text-align: center; position: relative; } .main-nav .ct-tab .ct-ul li a i { display: none; } .main-nav .ct-tab .ct-ul li a i { display: none; } .main-nav .ct-tab .ct-ul li a .content { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-nav .ct-tab .ct-ul li a:hover { z-index: 1; } .main-nav .ct-tab .ct-ul li:first-child a:hover, .main-nav .ct-tab li:first-child a.active { margin-left: 0; margin-right: 0; } .main-nav .ct-tab .ct-ul li a:hover, .main-nav .ct-tab li a.active { max-width: 250px; display: block; text-align: center; position: relative; border: 0; margin: 0 -20px; margin-top: 4px; color: black; padding: 0; } .main-nav .ct-tab .padding { width: auto; padding: 0 16px; } .main-nav .ct-tab .ct-ul li a:hover > i, .main-nav .ct-tab .ct-ul li a.active > i { display: inline-block; width: 34px; height: 37px; float: left; } .main-nav .ct-tab .ct-ul li a:hover .line-l { background: url(../../asserts/images/home/main/line_left.png) no-repeat; } .main-nav .ct-tab .ct-ul li a:hover .line-r { background: url(../../asserts/images/home/main/line_right.png) no-repeat; } .main-nav .ct-tab .ct-ul li a.active .line-l { background: url(../../asserts/images/home/main/line_sel_left.png) no-repeat; } .main-nav .ct-tab .ct-ul li a.active .line-r { background: url(../../asserts/images/home/main/line_sel_right.png) no-repeat; } .main-nav .ct-tab .ct-ul li a:hover .content, .main-nav .ct-tab li a.active .content { border-top: 1px solid #ddd; float: left; line-height: 36px; min-width: 60px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgb(245, 245, 245); } .main-nav .ct-tab .ct-ul li a:hover .cha, .main-nav .ct-tab .ct-ul li a.active .cha { background: rgb(245, 245, 245); width: 20px; height: 36px; line-height: 36px; border-top: 1px solid #ddd; padding-left: 7px; color: #303e51; } .main-nav .ct-tab .ct-ul li a.active .content, .main-nav .ct-tab .ct-ul li a.active .cha { background: white; } .main-nav .ct-tab .ct-ul li a .cha { color: #eee; } .main-nav .ct-tab .ct-ul li a .cha:hover { color: black; } .main-nav .ct-tab .ct-ul li a.active { z-index: 2; } </style> <script> import axios from 'axios' import { mapState} from 'vuex' import * as mainConst from '@/store/mainConst.js' import config from '@/config/index.js' import storage from '@/utils/storage.js' export default{ data(){ return { funMenu: { // 一级菜单 firstMenu: [], // 二级菜单 nextMenu: [], // 三级菜单 lastMenu: [], // 是否显示 menuIsShow: true } } }, computed: mapState({ // 箭头函数可使代码更简练 funcMenuList: state => state.funcMenuList, }), methods: { // 跳转首页 goHome(){ // 跳转首页就关闭iframe this.$store.commit(mainConst.M_HIDE_IFRAME) this.$router.push(`/${this.$store.state.systemName}`) }, // ★★★★★调用方法获取三级菜单列表★★★★★ getMainMenu(){ var _this = this if (this.funMenu.firstMenu.length) { this.funMenu.menuIsShow = true } else { if (config.setting.funcMenu) { _this.funMenu.firstMenu = storage.getItem('hivescm.userAuthor').menus.funcs } else { axios.get("data/menu_json.json") .then(function (res) { _this.funMenu.firstMenu = res.data.result.funcs }) } } }, // 点击菜单展开下一级别列表事件 clickByMenu(e, menuItem, level){ let menuList = this.funMenu[level] switch (level) { case "firstMenu": { this.funMenu.nextMenu = this.getFirstAndNextVal(menuList, menuItem) this.funMenu.lastMenu = [] } break case "nextMenu": { if (!menuItem.url.length) this.funMenu.lastMenu = this.getFirstAndNextVal(menuList, menuItem) // menuItem.url.length ? this.clickMenuJump(menuList, menuItem) : this.funMenu.lastMenu = this.getFirstAndNextVal(menuList, menuItem) } break case "lastMenu": { this.clickMenuJump(menuList, menuItem) } break } }, // ★★★★★点击有url的菜单,跳转事件★★★★★ clickMenuJump(menuList, menuItem){ if (!menuItem.url.length) return this.funMenu.menuIsShow = false this.lastmenuChange(menuList, menuItem) let iframeTabItem = {} // 1、路由跳转和iframe的显示隐藏 if (menuItem.url.toLowerCase().indexOf("/") != 0 || menuItem.url.toLowerCase().indexOf("/iframe") == 0) { // 判断如果是iframe的url,显示iframe // 定义一个新的item对象,防止对象的引用 iframeTabItem = Object.assign({}, menuItem) this.$store.commit(mainConst.M_SHOW_IFRAME) // 待优化:应该有优化为手动赋值样式 // (1)、此处利用router-view的特性,让一级tab变颜色 // (2)、这个还是控制一级tab点击切换tab标签的重要因素 // 因为原始的iframe的url已经改变,所以要保存到一个新的变量里面,如果已经有了就不需要在放了 if (!menuItem.iframeUrl) { menuItem.iframeUrl = menuItem.url let userId = storage.getItem('hivescm.userAuthor').id let token = storage.getItem('hivescm.userAuthor').token iframeTabItem.url = `${menuItem.url}?userId=${userId}&token=${token}` } else { let userId = storage.getItem('hivescm.userAuthor').id let token = storage.getItem('hivescm.userAuthor').token iframeTabItem.url = `${menuItem.iframeUrl}?userId=${userId}&token=${token}` console.log(iframeTabItem.url) // iframeTabItem.url = menuItem.iframeUrl } menuItem.url = `/iframe/${menuItem.tag}` this.$router.push(`/iframe/${menuItem.tag}`) } else { // 判断如果是spa的url,隐藏iframe this.$store.commit(mainConst.M_HIDE_IFRAME) menuItem.url=`${menuItem.url}?permissionId=${menuItem.permissionId}` this.$router.push({path:menuItem.url,query:{permissionId:menuItem.permissionId}}) } // 2、判断vuex中是否有重复的tab标签 let navTabData = this.$store.state.navTabData for (let i = 0; i < navTabData.length; i++) { if (navTabData[i].url == menuItem.url) { // 已经有页签了,一级tab内容不重新渲染 // 切换一级tab页签的激活样式 this.$store.commit(mainConst.M_UPDATE_NAVTABDATA, {navIndex: i}) // 从新计算一级tab位置 this.$root.bus.$emit("clickLastMenu", menuItem) if (menuItem.url.toLowerCase().indexOf("/iframe") == 0) { // 如果已经iframe中的tab已经存在,那么触发iframe中的切换事件 // this.$store.commit(mainConst.M_SHOW_IFRAME) this.$root.bus.$emit("changeIframeTab", menuItem.url.slice(8)) } return } } // 3、向vuex中添加一级tab // 默认是否选中 menuItem.active = true // 向一级tab中添加新的tab标签 this.$store.commit(mainConst.M_PUSH_NAVTABDATA, menuItem) this.$store.commit(mainConst.M_UPDATE_NAVTABDATA, {navIndex: navTabData.length - 1}) // 向iframe中的tab添加页签 this.$root.bus.$emit("addIframeTab", iframeTabItem) }, // 清空导航属性值,确保再次点击无选中样式及不匹配数据 lastmenuChange(menuList, menuItem){ this.funMenu.firstMenu.forEach(function (item) { item.active = false }) this.funMenu.nextMenu.forEach(function (item) { item.active = false }) this.funMenu.lastMenu.forEach(function (item) { item.active = false }) this.funMenu.nextMenu = [] this.funMenu.lastMenu = [] }, // 增加选中样式及赋值下级菜单 getFirstAndNextVal(menuList, menuItem){ var childFuncs = [] for (let i = 0; i < menuList.length; i++) { if (menuList[i].permissionId == menuItem.permissionId) { menuList[i].active = true childFuncs = menuList[i].childFuncs || [] } else { menuList[i].active = false } } return childFuncs } } } </script>
还要添加一个没用的路由,因为我们的锚记还要发生变化
/* * iframe/router/index.js */ const systemNamePrefix = "iframe_" import MainContainer from '@/containers/MainContainer.vue' import IframeComponent from '@Iframe/containers/IframeComponent.vue' export default [ { path: '/iframe', component: MainContainer, children: [ {path: ':tag', component: IframeComponent, meta: {requiresAuth: true, keepAlive: true}}, ], meta: {requiresAuth: true} } ]
/* * iframeComponent.vue,一个没用的vue文件,只是为了让浏览器中的锚记发生变化 */ <template> <div v-if="isCache"> <span>{{src}}</span> </div> </template> <style scoped lang="scss"> </style> <script> export default{ data(){ return { isCache: true, src: '' } }, created(){ }, mounted(){ // 1、这个页面存在的意义就是在iframe页面切换的时候,路由可以跳转过去用,没有实际大的作用,但是得有这个页面 // 2、iframe的Tab页面的z-index比这个页面的高 this.src=this.$route.params.tag } } </script>
3. 思考点
虽然这样和iframe结合有点恶心,但是可以实现我们的思路
在这个功能的实现中我们用到了bus事件总线的广播和监听
其实这点我们是可以仔细思考的,因为大量的使用广播不可控,我们可以完全用vuex去实现,这点用了广播,确实偷懒了
广播并不是不推荐,而是要使用对场景,这点其实用广播确实不太好,不利于扩展,谁能猜出来会有哪些扩展?
以上是“Vue如何集成Iframe页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。