前端父子页面传递消息

业务背景：

父页面在浏览器上开一个子页面去打开一个文档，在子页面中有删除该文档的操作。要求删除该文档后关闭当前页面并且刷新当前父页面，重新获取数据（去掉删除的文件）

实现步骤：

1、子页面删除当前文档后，刷新父页面，然后等待1s关闭自己（子页面），等待1s是为了给父页面反应时间的。

                        window.opener.location.reload();
                        setTimeout(() => {
                            window.location.href = 'about:blank'
                            window.close()                            
                        }, 1000);

 

2、父页面在打开子页面时，需要保持一些资源。我这里是放在vuex中。然后在重新生成的created中从vuex中判断一个变量是否需要从vuex中获取该类数据。

　

3、因为页面刷新会导致vuex中的数据丢失，所以需要在app.vue页面的created时把vuex中数据保持到 sessionStorage 中去。

main.js

// 界面刷新前，将store里面的数据暂存在localStorage里面
window.addEventListener('beforeunload', () => {
    JSON.stringify(this.$store.state))
})

app.vue 中 created

      if (window.sessionStorage.getItem("store")){
          this.$store.replaceState(Object.assign({},this.$store.state, JSON.parse(window.sessionStorage.getItem("store"))))
      }

 

具体业务场景就不写了