场景:一个表单设计流程,为了传值开发方便,很大程度上都是使用单页面开发,过程中产品需要回退(返回功能)。
解决思路:使用锚点。打开全屏弹窗的时候,改变url添加锚点,关闭的时候去除锚点。返回的时候使用 this.$router.back();
如果涉及多弹窗之间的记录,需要使用watch监听路由变化。
watch: {
'$route.hash' (val){
let configWhiteList = ['#config','#option']; //config白名单
let sortWhiteList = ['#sort']; //sort白名单
if(!configWhiteList.includes(val)){ //关闭config 配置页
this.config.show = false;
}
if(!sortWhiteList.includes(val)){ //sort页
this.ctrlSortPicker.show = false;
}
}
},
//打开弹窗的时候 设置对象hash
window.location.hash = '#option';
window.location.hash = '#sort';