1. 项目需求
我们切换为vue框架是后面的事情,之前还有一些功能页面是用jsp页面写的,而我们的管理系统需要既支持Vue的url,又要支持这些发布之后的jsp页面
还有一个就是切换tab回来的时候之前输入的东西还要存在
系统页面截图
2. 实现思路
针对这个问题,我们最开始的实现思路是写了一个iframe的通用组件,然后把不同的http的页面的url传递进来进行切换,但是这样不满足第二条,我们发现只要切换了vue的路由,然后再切回http的页面,iframe中的src属性的页面就会从新刷新,没有办法保留住东西,于是就有了下面的实现思路
我们在vue的router-view同级别添加了一个iframeTemp组件,其实就是一个elementUI的tab组件,然后把tab组件的头的样式隐藏在我们菜单栏的下面
之后的ifram组件的显示隐藏和tab切换,都是通用vuex和bus事件广播实现的
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'
export default {
state: {
// 一级Tab导航数据集合
navTabData: [],// 进入的主系统前缀
systemName:'',// 控制路由同级的Iframe的显示隐藏
showIframe: false,// iframe页面中的选中页签的code值
iframeSelectTab:'',// iframe页面的tab数据集合
iframeTabData:[]
},getters: {
mainConst.G_GET_NAVTABDATA{
return state.navTabData
}
},mutations: {
// 一级tab处理
mainConst.M_UPDATE_NAVTABDATA{
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 {
// 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}()
// console.log(66666)
// }
}
}
还要添加一个没用的路由,因为我们的锚记还要发生变化
{
path: '/iframe',component: MainContainer,children: [
{path: ':tag',component: IframeComponent,Meta: {requiresAuth: true,keepAlive: true}},],Meta: {requiresAuth: true}
}
]