vue中新的窗口关闭,旧窗口数据刷新
发起流程,打开新的窗口,新窗口进行数据处理后关闭弹窗,发起流程的旧页面要重新发起请求刷新数据,如果不刷新的话,发起流程后的数据还存在,防止二次发起流程
·
问题:发起流程,打开新的窗口,新窗口进行数据处理后关闭弹窗,发起流程的旧页面要重新发起请求刷新数据,如果不刷新的话,发起流程后的数据还存在,防止二次发起流程
思路:当面对这个问题的时候,我第一反应想到的是使用vuex、eventBus、localStorage 、sessionStorage 。通过数据共享去获取父页面路由存在本地中,旧页面去监听数据进行操作;
但是想了一下,sessionStorage不共享窗口;localStorage不安全,怕信息泄露;vuex、eventBus不同窗口间数据不共享,果断放弃了这些方案;通过查询资料得到符合我需求的方案,希望能帮助到你。
解决方案:
使用window.opener.postMessage发送信息,window.addEventListener接收信息
1、监听页面关闭
//vue2.0
mounted () {
// 关闭页面操作
this.$store.commit('workflowData/setWorkflowRoute', this.$route.path)
window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
window.addEventListener('unload', (e) => this.unloadHandler(e))
},
methods:{
beforeunloadHandler (e) {
this._beforeUnload_time = new Date().getTime()
// e.returnValue = '关闭提示'
},
unloadHandler (e) {
this._gap_time = new Date().getTime() - this._beforeUnload_time
// 判断是窗口关闭还是刷新
if (this._gap_time <= 5) {
// 窗口关闭
console.log('路由关闭===', window.opener)
window.opener.postMessage(
{
parentPath: window.opener.parent.location.hash.slice(1),
type: 'closeWorkflow'
},
'*'
)
}
},
destroyed () {
window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
window.removeEventListener('unload', (e) => this.unloadHandler(e))
}
2、在旧页面去接收发送过来的数据
//vue2.0
created () {
window.addEventListener('message', (res) => {
this.getMessage(res, 'searchForm')
})
},
destroyed () {
window.removeEventListener('message', (res) => {
this.getMessage(res, 'searchForm')
})
},
到此不同页面之间就能互相通信了,如果有不对的地方请指出!
更多推荐
已为社区贡献1条内容
所有评论(0)