业务背景:
父页面在浏览器上开一个子页面去打开一个文档,在子页面中有删除该文档的操作。要求删除该文档后关闭当前页面并且刷新当前父页面,重新获取数据(去掉删除的文件)
实现步骤:
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")))) }
具体业务场景就不写了